/* ====================================================================================== style.css - CheckAZ (checkaz.vn) - KHUNG TAM 1.0 - Template Guest AZ Framework V4 TemplateID DC4CDFBF-65DF-4687-8517-7AA1FA1B049C - phien AZUI 12/11/2026 - sinh tu kinglux-web du-an/AZ-UI/guest/khung/gen_khung.py 1.0 : giao dien theo mockup AZUX anh duyet 12/11/2026 18:40 - CSS mockup (design/mockup-src/gen_core.py, gan pham vi .az-template luc sinh) dat DAU lop az-template.base ; lop tiep theo = phan rieng cua khung (dau trang dinh, menu dien thoai, bieu mau that, D1 ngan keo, tin bai). Giu tien to az-template-* cho lop cua khung, sang + toi (prefers-color-scheme + data-theme), 390 px khong cuon ngang. Mau : kinglux-web du-an/AZ-UI/brand/README.md muc 4 - chinh green-text, diem nhan brand-green. ====================================================================================== */ @layer az-template.base, az-template.layout, az-template.components, az-template.pages; @layer az-template.base { .az-template{--ink:#0f1e33;--ink-soft:#4b5b70;--paper:#f4f7fb;--sheet:#fff;--rule:#d6dee8;--rule-strong:#b7c3d1;--primary:#005fb0;--on-primary:#fff;--link:#0057a3;--wash-blue:#e6f0fa;--wash-green:#e3f6ec;--warn:#8f5400;--wash-warn:#fbf0dc;--danger:#c62f36;--brand-blue:#006cc6;--brand-sky:#3d97e8;--brand-teal:#069096;--brand-green:#0cba60;--teal-text:#067a80;--green-text:#087a40;--foot:#0f1e33;--foot-ink:#c9d4e2;--grad:linear-gradient(45deg,#006cc6 0%,#069096 52%,#0cba60 100%);--c:var(--primary);--a:var(--brand-green);--on-c:var(--on-primary);--tint:color-mix(in srgb,var(--c) 9%,var(--sheet));--r-s:8px;--r-m:12px;--r-l:20px;background:var(--paper);color:var(--ink);font-family:"Be Vietnam Pro","Segoe UI",system-ui,sans-serif;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}.az-template.p-softaz,.az-template .p-softaz{--c:var(--primary);--a:var(--brand-green)}.az-template.p-tax,.az-template .p-tax{--c:var(--primary);--a:var(--green-text)}.az-template.p-crm,.az-template .p-crm{--c:var(--teal-text);--a:var(--brand-green)}.az-template.p-pos,.az-template .p-pos{--c:var(--brand-blue);--a:var(--brand-green)}.az-template.p-war,.az-template .p-war{--c:var(--teal-text);--a:var(--brand-sky)}.az-template.p-chk,.az-template .p-chk{--c:var(--green-text);--a:var(--brand-green)}.az-template.p-dms,.az-template .p-dms{--c:var(--green-text);--a:var(--brand-sky)}.az-template.p-erp,.az-template .p-erp{--c:var(--link);--a:var(--brand-teal)}.az-template.p-mai,.az-template .p-mai{--c:var(--brand-blue);--a:var(--brand-teal)}.az-template *{box-sizing:border-box}.az-template h1,.az-template h2,.az-template h3,.az-template h4,.az-template p,.az-template ul,.az-template ol,.az-template figure,.az-template dl,.az-template dd{margin:0}.az-template ul,.az-template ol{padding:0;list-style:none}.az-template a{color:var(--link);text-underline-offset:3px}.az-template img{display:block;max-width:100%}.az-template :focus-visible{outline:3px solid var(--brand-sky);outline-offset:2px}.az-template .wrap{max-width:1200px;margin:0 auto;padding:0 32px}.az-template .display{font-size:52px;line-height:1.06;font-weight:800;letter-spacing:-.02em}.az-template .h1{font-size:38px;line-height:1.14;font-weight:800;letter-spacing:-.015em}.az-template .h2{font-size:30px;line-height:1.18;font-weight:800;letter-spacing:-.01em}.az-template .h3{font-size:19px;line-height:1.3;font-weight:700}.az-template .lead{font-size:19px;line-height:1.55;color:var(--ink-soft);max-width:620px}.az-template .muted{color:var(--ink-soft)}.az-template .sm{font-size:14px;line-height:1.5}.az-template .xs{font-size:12.5px;line-height:1.45}.az-template .mono{font-family:"JetBrains Mono",ui-monospace,Consolas,monospace;font-feature-settings:"tnum" 1}.az-template .serif{font-family:"Noto Serif",Georgia,serif}.az-template .num{font-variant-numeric:tabular-nums}.az-template .stack{display:flex;flex-direction:column;gap:16px}.az-template .row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.az-template .between{justify-content:space-between}.az-template .g2,.az-template .g3,.az-template .g4,.az-template .g5{display:grid;gap:24px}.az-template .g2{grid-template-columns:repeat(2,minmax(0,1fr))}.az-template .g3{grid-template-columns:repeat(3,minmax(0,1fr))}.az-template .g4{grid-template-columns:repeat(4,minmax(0,1fr))}.az-template .g5{grid-template-columns:repeat(5,minmax(0,1fr))}.az-template .sec{padding:80px 0}.az-template .sec-s{padding:48px 0}.az-template .sheet-bg{background:var(--sheet)}.az-template .tint-bg{background:var(--tint)}.az-template .sec-head{display:flex;flex-direction:column;gap:12px;margin-bottom:36px;max-width:720px}.az-template .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 22px;border-radius:999px;font:600 15px/1.2 "Be Vietnam Pro",system-ui,sans-serif;text-decoration:none;border:1.5px solid transparent;cursor:pointer;white-space:nowrap}.az-template .btn-c{background:var(--c);color:var(--on-c)}.az-template .btn-o{background:transparent;color:var(--c);border-color:var(--c)}.az-template .btn-g{background:var(--sheet);color:var(--ink);border-color:var(--rule-strong)}.az-template .btn-s{min-height:38px;padding:0 16px;font-size:14px}.az-template .btn-w{background:#fff;color:#0f1e33}.az-template .btn-full{width:100%}.az-template .btn-c,.az-template .btn-c:hover{color:var(--on-c)}.az-template .chip{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 14px;border-radius:999px;border:1px solid var(--rule-strong);background:var(--sheet);color:var(--ink);font:500 14px/1.2 "Be Vietnam Pro",sans-serif;white-space:nowrap;cursor:pointer;text-decoration:none}.az-template .chip.on{background:var(--c);border-color:var(--c);color:var(--on-c)}.az-template .tag{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;background:var(--tint);color:var(--c);font:600 12.5px/1.3 "Be Vietnam Pro",sans-serif}.az-template .tag-warn{background:var(--wash-warn);color:var(--warn)}.az-template .tag-ok{background:var(--wash-green);color:var(--green-text)}.az-template .tag-grey{background:var(--paper);color:var(--ink-soft);border:1px solid var(--rule)}.az-template .hold{color:var(--warn);font-weight:600}.az-template .card{background:var(--sheet);border:1px solid var(--rule);border-radius:var(--r-m);padding:24px}.az-template .ph{display:flex;align-items:center;justify-content:center;text-align:center;border:1.5px dashed var(--rule-strong);border-radius:var(--r-m);background:repeating-linear-gradient(135deg,transparent 0 10px,color-mix(in srgb,var(--rule) 45%,transparent) 10px 11px);color:var(--ink-soft);font-size:13px;padding:12px}.az-template .icon{width:22px;height:22px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.az-template .icon-s{width:18px;height:18px}.az-template .strip{background:var(--wash-blue);color:var(--ink-soft);font-size:13.5px}.az-template .strip .wrap{display:flex;justify-content:space-between;align-items:center;min-height:36px;gap:16px}.az-template .strip b{color:var(--ink);font-weight:600}.az-template .hdr{background:var(--sheet);border-bottom:1px solid var(--rule)}.az-template .hdr .wrap{display:flex;align-items:center;gap:28px;min-height:70px}.az-template .brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}.az-template .brand img{width:34px;height:34px}.az-template .brand-name{font-weight:800;font-size:19px;letter-spacing:-.01em;color:var(--c)}.az-template .brand-sub{display:block;font-size:11.5px;font-weight:500;color:var(--ink-soft);letter-spacing:0}.az-template .nav{display:flex;gap:22px;flex:1}.az-template .nav a{color:var(--ink);text-decoration:none;font-weight:500;font-size:15px}.az-template .nav a.on{color:var(--c);box-shadow:inset 0 -2px 0 var(--c)}.az-template .hdr-act{display:flex;align-items:center;gap:12px}.az-template .iconbtn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:999px;border:1px solid var(--rule);background:var(--sheet);color:var(--ink);cursor:pointer}.az-template .login{color:var(--ink);text-decoration:none;font-weight:500;font-size:15px}.az-template .menu-btn{display:none}.az-template .ftr{background:var(--foot);color:var(--foot-ink);padding:56px 0 28px;font-size:14.5px}.az-template .ftr a{color:#e6edf5;text-decoration:none}.az-template .ftr-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}.az-template .ftr h4{font-size:14px;color:#fff;margin-bottom:12px;font-weight:700}.az-template .ftr li{margin-bottom:8px}.az-template .logo-box{display:inline-flex;background:#fff;border-radius:var(--r-m);padding:10px 14px;margin-bottom:14px}.az-template .logo-box img{height:40px;width:auto}.az-template .ftr-legal{border-top:1px solid rgba(255,255,255,.14);margin-top:36px;padding-top:20px;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:13px}.az-template .bct{display:inline-flex;align-items:center;gap:8px;border:1px dashed rgba(255,255,255,.4);border-radius:8px;padding:6px 10px;font-size:12px}.az-template .mbar{display:none;position:sticky;bottom:0;z-index:5;background:var(--sheet);border-top:1px solid var(--rule);padding:10px 12px;gap:8px}.az-template .mbar .btn{flex:1;min-height:44px;padding:0 10px}.az-template .price{background:var(--sheet);border:1px solid var(--rule);border-radius:var(--r-l);padding:26px;display:flex;flex-direction:column;gap:14px}.az-template .price.hot{border:2px solid var(--c);box-shadow:0 18px 40px -26px color-mix(in srgb,var(--c) 70%,transparent)}.az-template .price .amt{font-size:32px;font-weight:800;letter-spacing:-.02em;line-height:1.1}.az-template .price .per{font-size:14px;color:var(--ink-soft);font-weight:500}.az-template .price ul{display:flex;flex-direction:column;gap:8px;font-size:14.5px}.az-template .price li{display:flex;gap:8px;align-items:flex-start}.az-template .price li .icon{color:var(--a);margin-top:2px}.az-template .toggle{display:inline-flex;border:1px solid var(--rule-strong);border-radius:999px;padding:4px;background:var(--sheet)}.az-template .toggle>*{min-height:36px;padding:7px 16px;border-radius:999px;border:0;background:transparent;font:600 14px/1.2 "Be Vietnam Pro",sans-serif;color:var(--ink-soft);cursor:pointer}.az-template .toggle>.on{background:var(--c);color:var(--on-c)}.az-template .steps{display:grid;gap:16px;counter-reset:st}.az-template .steps>li{position:relative;padding-left:52px;min-height:40px}.az-template .steps>li::before{counter-increment:st;content:counter(st);position:absolute;left:0;top:0;width:36px;height:36px;border-radius:999px;background:var(--tint);color:var(--c);font-weight:800;display:flex;align-items:center;justify-content:center}.az-template .hsteps{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0;counter-reset:st}.az-template .hsteps>li{position:relative;padding:52px 14px 0 0}.az-template .hsteps>li::before{counter-increment:st;content:counter(st);position:absolute;left:0;top:0;width:36px;height:36px;border-radius:999px;background:var(--c);color:var(--on-c);font-weight:800;display:flex;align-items:center;justify-content:center;z-index:1}.az-template .hsteps>li::after{content:"";position:absolute;left:36px;right:0;top:17px;height:2px;background:var(--rule-strong)}.az-template .hsteps>li:last-child::after{display:none}.az-template .faq{border-top:1px solid var(--rule)}.az-template .faq details{border-bottom:1px solid var(--rule);padding:18px 0}.az-template .faq summary{font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px}.az-template .faq summary::after{content:"+";font-size:22px;line-height:1;color:var(--c)}.az-template .faq details[open] summary::after{content:"–"}.az-template .faq p{margin-top:10px;color:var(--ink-soft);max-width:760px}.az-template .field{display:flex;flex-direction:column;gap:6px}.az-template .field label{font-size:14px;font-weight:600}.az-template .field label .req{color:var(--danger)}.az-template .input{min-height:46px;border:1.5px solid var(--rule-strong);border-radius:var(--r-s);padding:10px 14px;font:400 15px/1.4 "Be Vietnam Pro",sans-serif;background:var(--sheet);color:var(--ink);width:100%}.az-template .input.focus{border-color:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 22%,transparent)}.az-template .hint{font-size:13px;color:var(--ink-soft)}.az-template .check{display:flex;gap:10px;align-items:flex-start;font-size:14px}.az-template .check input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--c)}.az-template .seg{display:flex;flex-wrap:wrap;gap:8px}.az-template .stepper{display:flex;align-items:center;border:1.5px solid var(--rule-strong);border-radius:var(--r-s);overflow:hidden;width:max-content}.az-template .stepper button,.az-template .stepper .az-template-was-btn{width:44px;height:44px;border:0;background:var(--paper);color:var(--ink);font-size:20px;cursor:pointer}.az-template .stepper span{min-width:56px;text-align:center;font-weight:700}.az-template .tbl{width:100%;border-collapse:collapse;font-size:14.5px;background:var(--sheet)}.az-template .tbl th{text-align:left;font-weight:600;color:var(--ink-soft);font-size:13px;padding:10px 12px;border-bottom:1px solid var(--rule-strong);background:var(--paper)}.az-template .tbl td{padding:12px;border-bottom:1px solid var(--rule);vertical-align:top}.az-template .tbl .r{text-align:right}.az-template .tbl .c{text-align:center}.az-template .tbl-box{border:1px solid var(--rule);border-radius:var(--r-m);overflow:auto;background:var(--sheet)}.az-template .yes{color:var(--green-text);font-weight:700}.az-template .no{color:var(--ink-soft)}.az-template .scrim{position:relative;background:color-mix(in srgb,#0f1e33 42%,transparent)}.az-template .drawer{background:var(--sheet);border-left:1px solid var(--rule);display:flex;flex-direction:column}.az-template .dw-head{display:flex;justify-content:space-between;align-items:center;padding:20px 28px;border-bottom:1px solid var(--rule)}.az-template .dw-steps{display:flex;gap:6px;padding:16px 28px;border-bottom:1px solid var(--rule);flex-wrap:wrap}.az-template .dw-steps span{font-size:13px;font-weight:600;color:var(--ink-soft);padding:6px 10px;border-radius:999px;background:var(--paper)}.az-template .dw-steps span.on{background:var(--c);color:var(--on-c)}.az-template .dw-steps span.done{background:var(--tint);color:var(--c)}.az-template .dw-body{padding:24px 28px;display:flex;flex-direction:column;gap:18px;flex:1}.az-template .dw-foot{padding:18px 28px;border-top:1px solid var(--rule);display:flex;justify-content:space-between;align-items:center;gap:16px;background:var(--paper)}.az-template .order{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-m);padding:20px;display:flex;flex-direction:column;gap:10px;font-size:14.5px}.az-template .order .ln{display:flex;justify-content:space-between;gap:12px}.az-template .order .tot{border-top:1px dashed var(--rule-strong);padding-top:12px;font-weight:800;font-size:20px}.az-template .qr{width:180px;height:180px;background: conic-gradient(from 90deg at 18% 18%,#0f1e33 25%,transparent 0) 0 0/36px 36px,repeating-linear-gradient(90deg,#0f1e33 0 6px,transparent 6px 12px),repeating-linear-gradient(0deg,#fff 0 6px,transparent 6px 15px);border:10px solid #fff;outline:1px solid var(--rule);border-radius:6px}.az-template .adm{display:flex;flex-wrap:wrap;background:var(--paper)}.az-template .adm-nav{flex:1 1 220px;max-width:240px;background:var(--sheet);border-right:1px solid var(--rule);padding:16px 12px;display:flex;flex-direction:column;gap:4px}.az-template .adm-nav a{display:flex;gap:10px;align-items:center;padding:9px 12px;border-radius:var(--r-s);color:var(--ink);text-decoration:none;font-size:14.5px;font-weight:500}.az-template .adm-nav a.on{background:var(--tint);color:var(--c);font-weight:700}.az-template .adm-nav .grp{font-size:12px;color:var(--ink-soft);padding:14px 12px 4px;font-weight:600}.az-template .adm-main{flex:999 1 560px;min-width:0;display:flex;flex-direction:column}.az-template .adm-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 24px;background:var(--sheet);border-bottom:1px solid var(--rule);flex-wrap:wrap}.az-template .adm-title{font-size:21px;font-weight:800}.az-template .az-filter{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:14px 24px}.az-template .az-f-main{flex:1 1 280px;position:relative}.az-template .az-f-main .input{padding-left:42px}.az-template .az-f-main .icon{position:absolute;left:13px;top:12px;color:var(--ink-soft)}.az-template .az-chips{display:flex;gap:8px;flex-wrap:wrap;padding:0 24px 12px}.az-template .az-v-data{margin:0 24px 16px;border:1px solid var(--rule);border-radius:var(--r-m);overflow:auto;background:var(--sheet)}.az-template .az-v-data table{width:100%;border-collapse:collapse;font-size:14px}.az-template .az-v-data th{position:sticky;top:0;background:var(--paper);text-align:left;font-size:12.5px;font-weight:600;color:var(--ink-soft);padding:10px 12px;border-bottom:1px solid var(--rule-strong);white-space:nowrap}.az-template .az-v-data td{padding:11px 12px;border-bottom:1px solid var(--rule);vertical-align:middle}.az-template .az-v-data tr.sel td{background:var(--tint)}.az-template .az-v-data .r{text-align:right}.az-template .az-v-data .act{white-space:nowrap;text-align:right}.az-template .az-btn{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 14px;border-radius:var(--r-s);border:1px solid var(--rule-strong);background:var(--sheet);color:var(--ink);font:600 13.5px/1 "Be Vietnam Pro",sans-serif;cursor:pointer;white-space:nowrap;text-decoration:none}.az-template .az-btn.pri{background:var(--c);border-color:var(--c);color:var(--on-c)}.az-template .az-btn.sm{min-height:32px;padding:0 10px;font-size:13px}.az-template .az-btn.ghost{border-color:transparent;background:transparent}.az-template .az-badge{display:inline-flex;align-items:center;padding:2px 9px;border-radius:999px;font-size:12.5px;font-weight:600;white-space:nowrap}.az-template .az-badge-green{background:var(--wash-green);color:var(--green-text)}.az-template .az-badge-blue{background:var(--wash-blue);color:var(--link)}.az-template .az-badge-amber{background:var(--wash-warn);color:var(--warn)}.az-template .az-badge-grey{background:var(--paper);color:var(--ink-soft);border:1px solid var(--rule)}.az-template .az-badge-red{background:color-mix(in srgb,var(--danger) 12%,var(--sheet));color:var(--danger)}.az-template .az-v-paging{display:flex;justify-content:space-between;align-items:center;padding:0 24px 24px;color:var(--ink-soft);font-size:13.5px}.az-template .dlg-wrap{display:flex;justify-content:flex-end}.az-template .dlg{width:min(560px,100%);background:var(--sheet);border-left:1px solid var(--rule);display:flex;flex-direction:column;box-shadow:-24px 0 48px -32px rgba(15,30,51,.45)}.az-template .dlg-head{padding:18px 24px;border-bottom:1px solid var(--rule);display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.az-template .dlg-body{padding:20px 24px;display:flex;flex-direction:column;gap:20px}.az-template .dlg-sec h4{font-size:13px;color:var(--ink-soft);font-weight:700;margin-bottom:10px}.az-template .kv{display:grid;grid-template-columns:150px minmax(0,1fr);gap:8px 14px;font-size:14px}.az-template .kv dt{color:var(--ink-soft)}.az-template .kv dd{font-weight:500}.az-template .dlg-foot{padding:14px 24px;border-top:1px solid var(--rule);display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;background:var(--paper)}.az-template .kpi{background:var(--sheet);border:1px solid var(--rule);border-radius:var(--r-m);padding:16px 18px}.az-template .kpi b{display:block;font-size:26px;font-weight:800;letter-spacing:-.01em}.az-template .fixed{overflow:hidden}.az-template .app{width:390px;height:844px;background:var(--paper);display:flex;flex-direction:column;overflow:hidden}.az-template .app-top{background:var(--sheet);border-bottom:1px solid var(--rule);padding:14px 16px;display:flex;align-items:center;gap:12px}.az-template .app-body{flex:1;padding:16px;display:flex;flex-direction:column;gap:14px;overflow:hidden}.az-template .app-tab{background:var(--sheet);border-top:1px solid var(--rule);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:8px 4px 12px}.az-template .app-tab a{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11.5px;color:var(--ink-soft);text-decoration:none;font-weight:600}.az-template .app-tab a.on{color:var(--c)}.az-template .shelf{position:relative;display:flex;gap:18px;align-items:flex-end;padding:0 8px}.az-template .shelf::after{content:"";position:absolute;left:0;right:0;bottom:-18px;height:18px;border-radius:4px;background:linear-gradient(var(--rule-strong),color-mix(in srgb,var(--rule-strong) 60%,var(--paper)))}.az-template .box{flex:1;min-width:0;background:var(--sheet);border:1px solid var(--rule);border-radius:14px 14px 6px 6px;display:flex;flex-direction:column;overflow:hidden}.az-template .box-top{height:10px;background:var(--c)}.az-template .box-body{padding:18px 18px 16px;display:flex;flex-direction:column;gap:10px;flex:1}.az-template .box-name{font-weight:800;font-size:18px;color:var(--c)}.az-template .box-motif{height:54px;border-radius:8px;background:var(--tint);display:flex;align-items:center;justify-content:center;color:var(--c)}.az-template .box .from{font-size:13.5px;color:var(--ink-soft)}.az-template .box .from b{color:var(--ink);font-size:16px}.az-template .ledger{background:#fffdf8;color:#1e2a3a;border:1px solid #d9d2c3;border-radius:6px;position:relative;background-image:repeating-linear-gradient(transparent 0 33px,#e7e0d0 33px 34px);padding:24px 28px}.az-template .mau-so{position:absolute;right:20px;top:14px;font-family:"Noto Serif",Georgia,serif;font-size:12.5px;text-align:right;line-height:1.35;color:inherit;opacity:.8}.az-template .stamp{display:inline-block;border:2.5px solid var(--green-text);color:var(--green-text);border-radius:8px;padding:6px 14px;font-weight:800;transform:rotate(-6deg);letter-spacing:.02em}.az-template .kb{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;background:var(--sheet);border:1px solid var(--rule);border-radius:var(--r-l);padding:16px}.az-template .kb-col{background:var(--paper);border-radius:var(--r-m);padding:10px;display:flex;flex-direction:column;gap:8px;min-height:250px}.az-template .kb-col h5{margin:0;font-size:12.5px;color:var(--ink-soft);display:flex;justify-content:space-between}.az-template .kb-card{background:var(--sheet);border:1px solid var(--rule);border-radius:10px;padding:10px;font-size:13px;display:flex;flex-direction:column;gap:4px}.az-template .kb-card b{font-size:13.5px}.az-template .kb-card.moving{transform:rotate(3deg) translateX(18px);border-color:var(--c);box-shadow:0 16px 30px -18px rgba(15,30,51,.55)}.az-template .due{font-size:11.5px;color:var(--warn);font-weight:600}.az-template .rcpt{background:#fff;color:#1b1b1b;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:13px;line-height:1.55;padding:22px 20px;position:relative;filter:drop-shadow(0 14px 22px rgba(15,30,51,.18))}.az-template .rcpt::before,.az-template .rcpt::after{content:"";position:absolute;left:0;right:0;height:10px;background:radial-gradient(circle at 5px 0,transparent 5px,#fff 5.5px) 0 0/10px 10px repeat-x}.az-template .rcpt::before{top:-10px;transform:scaleY(-1)}.az-template .rcpt::after{bottom:-10px}.az-template .rcpt .ln{display:flex;justify-content:space-between;gap:10px}.az-template .rcpt hr{border:0;border-top:1px dashed #9aa4b2;margin:8px 0}.az-template .rcpt .big{font-size:16px;font-weight:700}.az-template .lc{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));position:relative;margin-top:8px}.az-template .lc::before{content:"";position:absolute;left:5%;right:5%;top:21px;height:3px;background:var(--rule-strong)}.az-template .lc li{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;font-size:13.5px;font-weight:600}.az-template .lc li i{width:44px;height:44px;border-radius:999px;background:var(--sheet);border:2.5px solid var(--rule-strong);display:flex;align-items:center;justify-content:center;font-style:normal;color:var(--ink-soft);z-index:1}.az-template .lc li.hi i{border-color:var(--c);background:var(--c);color:var(--on-c)}.az-template .lc li.hi{color:var(--c)}.az-template .scan{position:relative;padding:22px;border-radius:var(--r-l);background:var(--sheet)}.az-template .scan .cn{position:absolute;width:28px;height:28px;border:3.5px solid var(--c)}.az-template .scan .tl{left:0;top:0;border-right:0;border-bottom:0;border-radius:14px 0 0 0}.az-template .scan .tr{right:0;top:0;border-left:0;border-bottom:0;border-radius:0 14px 0 0}.az-template .scan .bl{left:0;bottom:0;border-right:0;border-top:0;border-radius:0 0 0 14px}.az-template .scan .br{right:0;bottom:0;border-left:0;border-top:0;border-radius:0 0 14px 0}.az-template .flow{display:flex;align-items:stretch;gap:0}.az-template .flow .node{flex:1;min-width:0;background:var(--sheet);border:1.5px solid var(--rule-strong);border-radius:var(--r-m);padding:14px;display:flex;flex-direction:column;gap:6px}.az-template .flow .node b{color:var(--c)}.az-template .flow .link{flex:0 0 34px;display:flex;align-items:center}.az-template .flow .link::before{content:"";height:2px;flex:1;background:var(--c)}.az-template .flow .link::after{content:"";border:6px solid transparent;border-left-color:var(--c)}@media (max-width:760px){.az-template .wrap{padding:0 18px}.az-template .display{font-size:34px}.az-template .h1{font-size:28px}.az-template .h2{font-size:24px}.az-template .lead{font-size:16.5px}.az-template .nav,.az-template .login,.az-template .hdr-act .hide-m{display:none}.az-template .menu-btn{display:inline-flex}.az-template .hdr .wrap{gap:12px;min-height:60px}.az-template .hdr-act{margin-left:auto}.az-template .g2,.az-template .g3,.az-template .g4,.az-template .g5{grid-template-columns:minmax(0,1fr)}.az-template .sec{padding:52px 0}.az-template .sec-s{padding:36px 0}.az-template .ftr-top{grid-template-columns:1fr}.az-template .mbar{display:flex}.az-template .strip .wrap{justify-content:center}.az-template .strip .hide-m{display:none}.az-template .hsteps{grid-auto-flow:row}.az-template .hsteps>li::after{display:none}.az-template .shelf{flex-wrap:nowrap;overflow:hidden}.az-template .shelf .box{flex:0 0 72%}.az-template .lc{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:22px}.az-template .lc::before{display:none}.az-template .flow{flex-direction:column}.az-template .flow .link{flex:0 0 26px;justify-content:center}.az-template .flow .link::before{width:2px;height:auto;flex:1}.az-template .flow .link::after{display:none}.az-template .kb{grid-template-columns:repeat(2,minmax(0,1fr))}.az-template .chip,.az-template .btn-s,.az-template .az-btn,.az-template .az-btn.sm,.az-template .toggle>*{min-height:44px}.az-template [style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr)!important}}.az-template .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.az-template .gradband{height:6px;background:var(--grad)}.az-template .wide{max-width:1376px;margin:0 auto;padding:0 32px}.az-template .label{font-size:15px;font-weight:600;color:var(--c)}.az-template .offer{background:var(--ink);color:#e6edf5;font-size:13.5px}.az-template .offer .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:38px}.az-template .offer a{color:#fff;font-weight:600}.az-template .dev{position:relative;min-height:470px;margin:0}.az-template .laptop{position:absolute;left:0;top:34px;width:84%;background:#1b2a3f;border-radius:16px 16px 6px 6px;padding:12px 12px 16px;box-shadow:0 34px 60px -38px rgba(15,30,51,.7)}.az-template .laptop::after{content:"";position:absolute;left:-5%;right:-5%;bottom:-14px;height:14px;background:#c9d4e2;border-radius:0 0 16px 16px}.az-template .scr{background:var(--paper);border-radius:6px;overflow:hidden}.az-template .laptop .scr{height:300px;display:flex}.az-template .mini-nav{width:22%;background:var(--sheet);border-right:1px solid var(--rule);padding:12px 10px;display:flex;flex-direction:column;gap:8px}.az-template .mini-nav i{display:block;height:9px;border-radius:5px;background:var(--rule)}.az-template .mini-nav i.on{background:var(--c)}.az-template .mini-main{flex:1;padding:12px;display:flex;flex-direction:column;gap:8px;min-width:0}.az-template .mini-row{display:flex;gap:8px;align-items:center;background:var(--sheet);border:1px solid var(--rule);border-radius:7px;padding:8px 10px;font-size:11.5px}.az-template .mini-row span:first-child{flex:1;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.az-template .phone-f{position:absolute;right:0;bottom:6px;width:176px;height:340px;background:#0f1e33;border-radius:30px;padding:10px;box-shadow:0 30px 50px -30px rgba(15,30,51,.7)}.az-template .phone-f .scr{height:100%;border-radius:22px;padding:14px 12px;display:flex;flex-direction:column;gap:10px;background:var(--sheet)}.az-template .fcard{position:absolute;background:var(--sheet);border:1px solid var(--rule);border-radius:14px;padding:10px 14px;display:flex;gap:10px;align-items:center;font-size:13px;line-height:1.35;box-shadow:0 18px 34px -22px rgba(15,30,51,.6);max-width:260px}.az-template .fcard .sq{width:34px;height:34px;border-radius:9px;background:var(--tint);color:var(--c);display:flex;align-items:center;justify-content:center;flex:none}.az-template .shelf-grp{flex:2;min-width:0;display:flex;flex-direction:column;gap:8px}.az-template .shelf-grp>.lbl{font-size:13px;font-weight:700;color:var(--ink-soft);border-bottom:2px solid var(--rule-strong);padding-bottom:4px}.az-template .shelf-grp>.pair{display:flex;gap:18px;align-items:flex-end;flex:1}.az-template .soon{flex:1;min-width:0;border:1.5px dashed var(--rule-strong);border-radius:14px 14px 6px 6px;padding:16px;display:flex;flex-direction:column;gap:12px;background:color-mix(in srgb,var(--sheet) 60%,transparent)}.az-template .soon .it{display:flex;flex-direction:column;gap:6px;padding-bottom:12px;border-bottom:1px solid var(--rule)}.az-template .soon .it:last-child{border:0;padding:0}.az-template .mot{height:74px;border-radius:8px;background:var(--tint);position:relative;overflow:hidden;color:var(--c)}.az-template .mot .ln{position:absolute;left:12px;right:12px;height:2px;background:color-mix(in srgb,var(--c) 30%,transparent)}.az-template .mot .stp{position:absolute;right:10px;bottom:10px;font-size:10.5px;font-weight:800;border:2px solid var(--c);border-radius:5px;padding:1px 6px;transform:rotate(-7deg)}.az-template .mot .cols{position:absolute;inset:12px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.az-template .mot .cols i{display:flex;flex-direction:column;gap:4px;background:color-mix(in srgb,var(--sheet) 70%,transparent);border-radius:5px;padding:4px}.az-template .mot .cols b{display:block;height:9px;border-radius:3px;background:var(--sheet);border:1px solid color-mix(in srgb,var(--c) 35%,transparent)}.az-template .mot .rc{position:absolute;left:50%;top:10px;width:60px;margin-left:-30px;bottom:-4px;background:#fff;border-radius:3px 3px 0 0;padding:8px 7px;display:flex;flex-direction:column;gap:5px}.az-template .mot .rc i{display:block;height:3px;background:#b7c3d1}.az-template .mot .dots{position:absolute;left:14px;right:14px;top:34px;display:flex;justify-content:space-between}.az-template .mot .dots::before{content:"";position:absolute;left:0;right:0;top:5px;height:2px;background:color-mix(in srgb,var(--c) 30%,transparent)}.az-template .mot .dots i{width:12px;height:12px;border-radius:999px;background:var(--sheet);border:2px solid color-mix(in srgb,var(--c) 45%,transparent);z-index:1}.az-template .mot .dots i.on{background:var(--c);border-color:var(--c)}.az-template .mot .bub{position:absolute;font-size:10.5px;padding:4px 8px;border-radius:10px;background:var(--sheet);color:var(--ink)}.az-template .tabs{display:flex;gap:6px;flex-wrap:wrap;padding:6px;border-radius:999px;background:var(--sheet);border:1px solid var(--rule);width:max-content;max-width:100%}.az-template .tabs>*{min-height:40px;padding:0 16px;border-radius:999px;border:0;background:transparent;font:600 14px/1 "Be Vietnam Pro",sans-serif;color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}.az-template .tabs>.on{background:var(--c);color:var(--on-c)}.az-template .tabs>.on .dot{background:var(--on-c)}.az-template .dot{width:10px;height:10px;border-radius:999px;background:var(--c);flex:none;display:inline-block}.az-template .bundle{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:24px;align-items:start}.az-template .persona{display:flex;flex-direction:column;gap:10px}.az-template .persona button,.az-template .persona .az-template-was-btn{display:flex;gap:14px;align-items:center;text-align:left;min-height:64px;padding:12px 18px;border-radius:var(--r-m);border:1.5px solid var(--rule);background:var(--sheet);color:var(--ink);font:500 15px/1.4 "Be Vietnam Pro",sans-serif;cursor:pointer}.az-template .persona button.on,.az-template .persona .az-template-was-btn.on{border-color:var(--c);background:var(--tint)}.az-template .persona button b,.az-template .persona .az-template-was-btn b{display:block;font-weight:700}.az-template .hub{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.az-template .hub-n{border:1.5px solid var(--rule-strong);border-radius:12px;padding:12px 14px;background:var(--sheet);font-weight:600;font-size:14.5px;display:flex;gap:10px;align-items:center}.az-template .hub-n .dot{width:12px;height:12px}.az-template .hub-core{border-radius:16px;padding:22px 24px;background:var(--wash-blue);border:2px solid var(--primary);display:flex;flex-direction:column;gap:6px}.az-template .hub-band{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.az-template .hub-band span{padding:8px 14px;border-radius:999px;border:1px dashed var(--rule-strong);background:var(--sheet);font-size:13.5px;font-weight:500}.az-template .vline{height:26px;width:2px;background:var(--rule-strong);margin:0 auto}.az-template .tl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));position:relative}.az-template .tl::before{content:"";position:absolute;left:0;right:0;top:9px;height:2px;background:var(--rule-strong)}.az-template .tl>li{position:relative;padding:34px 18px 0 0}.az-template .tl>li::before{content:"";position:absolute;left:0;top:0;width:20px;height:20px;border-radius:999px;background:var(--sheet);border:4px solid var(--c);box-sizing:border-box}.az-template .tl>li.wait::before{border-style:dashed;border-color:var(--rule-strong)}.az-template .duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid var(--rule);border-radius:var(--r-l);overflow:hidden;background:var(--sheet)}.az-template .duo>div{padding:24px 28px;display:flex;flex-direction:column;gap:12px}.az-template .duo>div+div{border-left:1px solid var(--rule);background:var(--tint)}.az-template .kanban-mini .kb-col{min-height:200px}.az-template .chooser{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.az-template .chooser button,.az-template .chooser .az-template-was-btn{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:14px 16px;min-height:76px;border-radius:var(--r-m);border:1.5px solid var(--rule-strong);background:var(--sheet);color:var(--ink);font:500 14px/1.35 "Be Vietnam Pro",sans-serif;cursor:pointer;text-align:left}.az-template .chooser button b,.az-template .chooser .az-template-was-btn b{font-size:16px}.az-template .chooser button.on,.az-template .chooser .az-template-was-btn.on{border:2px solid var(--c);background:var(--tint)}.az-template .bill-line{display:flex;justify-content:space-between;gap:12px;font-size:15px}.az-template .bill-total{display:flex;justify-content:space-between;align-items:baseline;border-top:1px dashed var(--rule-strong);padding-top:12px}.az-template .bill-total b{font-size:28px;letter-spacing:-.02em}.az-template .vid{position:relative}.az-template .vid .play{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:999px;background:var(--sheet);display:flex;align-items:center;justify-content:center;color:var(--c);border:1px solid var(--rule)}.az-template .prog{display:flex;flex-direction:column;gap:0}.az-template .prog li{display:flex;gap:14px;padding:12px 0;border-bottom:1px solid var(--rule);align-items:flex-start}.az-template .prog li i{width:28px;height:28px;border-radius:999px;border:2px solid var(--rule-strong);flex:none;display:flex;align-items:center;justify-content:center;font-style:normal;color:var(--ink-soft)}.az-template .prog li.done i{background:var(--c);border-color:var(--c);color:var(--on-c)}.az-template .prog li.now i{border-color:var(--c);color:var(--c)}.az-template .cert{aspect-ratio:3/4;border:1px solid var(--rule-strong);border-radius:6px;background:#fffdf8;color:#1e2a3a;padding:22px;display:flex;flex-direction:column;gap:10px;align-items:center;text-align:center}.az-template .cert .blk{width:80%;height:12px;background:#1e2a3a;border-radius:2px;opacity:.85}.az-template .mapbox{min-height:260px;border-radius:var(--r-m);border:1px solid var(--rule);background: linear-gradient(90deg,transparent 48%,color-mix(in srgb,var(--rule-strong) 60%,transparent) 48% 52%,transparent 52%) 0 0/120px 120px,linear-gradient(0deg,transparent 48%,color-mix(in srgb,var(--rule-strong) 60%,transparent) 48% 52%,transparent 52%) 0 0/120px 120px,var(--paper);position:relative}.az-template .mapbox .pinx{position:absolute;left:46%;top:40%;color:var(--danger)}.az-template .acct{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.az-template .pos{position:relative;display:flex;flex-direction:column;height:100%;background:var(--paper);font-size:14px}.az-template .pos-top{display:flex;align-items:center;gap:16px;padding:0 16px;min-height:44px;background:#0f1e33;color:#c9d4e2;font-size:13px}.az-template .pos-top b{color:#fff}.az-template .pos-top .sp{flex:1}.az-template .pos-top .icon{color:#9fb0c4}.az-template .pos-main{flex:1;display:grid;grid-template-columns:minmax(0,1fr) 352px;min-height:0}.az-template .pos-l{display:flex;flex-direction:column;gap:12px;padding:14px 16px;min-width:0;min-height:0}.az-template .pos-r{background:var(--sheet);border-left:1px solid var(--rule);display:flex;flex-direction:column;padding:14px 16px;gap:12px}.az-template .scanbox{display:flex;align-items:center;gap:10px;border:2px solid var(--c);border-radius:10px;background:var(--sheet);padding:0 12px;min-height:52px;font-size:16px;color:var(--ink-soft)}.az-template .scanbox .caret{width:2px;height:24px;background:var(--c)}.az-template .kbd{font:600 11.5px/1 "JetBrains Mono",monospace;padding:3px 6px;border:1px solid var(--rule-strong);border-radius:5px;background:var(--paper);color:var(--ink-soft)}.az-template .cart{flex:1;background:var(--sheet);border:1px solid var(--rule);border-radius:10px;overflow:hidden;min-height:0}.az-template .cart table{width:100%;border-collapse:collapse}.az-template .cart th{font-size:12px;color:var(--ink-soft);text-align:left;font-weight:600;padding:8px 12px;background:var(--paper);border-bottom:1px solid var(--rule)}.az-template .cart td{padding:8px 12px;border-bottom:1px solid var(--rule)}.az-template .cart .r{text-align:right}.az-template .cart tr.new td{background:var(--tint)}.az-template .qty{display:inline-flex;align-items:center;border:1px solid var(--rule-strong);border-radius:8px;overflow:hidden}.az-template .qty button,.az-template .qty .az-template-was-btn{width:32px;height:32px;border:0;background:var(--paper);font-size:16px;cursor:pointer;color:var(--ink)}.az-template .qty span{min-width:30px;text-align:center;font-weight:700}.az-template .keys{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}.az-template .key{min-height:54px;border-radius:10px;border:1px solid var(--rule);background:var(--sheet);font:600 13.5px/1.2 "Be Vietnam Pro",sans-serif;color:var(--ink);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:4px}.az-template .key small{font-weight:500;color:var(--ink-soft);font-size:12px}.az-template .key.add{border-style:dashed;color:var(--ink-soft);font-size:20px}.az-template .sum{display:flex;flex-direction:column;gap:8px}.az-template .sum .ln{display:flex;justify-content:space-between}.az-template .big-total{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--rule);padding-top:12px}.az-template .big-total b{font-size:36px;font-weight:800;letter-spacing:-.02em}.az-template .paybtn{display:flex;align-items:center;justify-content:center;gap:10px;min-height:64px;border-radius:12px;border:0;background:var(--c);color:var(--on-c);font:800 18px/1 "Be Vietnam Pro",sans-serif;cursor:pointer;width:100%}.az-template .pos-foot{display:flex;gap:8px;align-items:center;padding:8px 16px;background:var(--sheet);border-top:1px solid var(--rule);flex-wrap:wrap}.az-template .otab{min-height:38px;padding:0 14px;border-radius:8px;border:1px solid var(--rule-strong);background:var(--paper);font:600 13px/1 "Be Vietnam Pro",sans-serif;color:var(--ink);display:inline-flex;align-items:center;gap:6px;cursor:pointer}.az-template .otab.on{background:var(--c);border-color:var(--c);color:var(--on-c)}.az-template .modal-bg{position:absolute;inset:0;background:rgba(15,30,51,.55);display:flex;align-items:center;justify-content:center;padding:24px}.az-template .modal{width:min(980px,100%);background:var(--sheet);border-radius:18px;overflow:hidden;box-shadow:0 40px 80px -40px rgba(0,0,0,.6);display:flex;flex-direction:column}.az-template .modal-h{display:flex;justify-content:space-between;align-items:center;padding:18px 24px;border-bottom:1px solid var(--rule)}.az-template .modal-b{display:grid;grid-template-columns:minmax(0,1fr) 320px}.az-template .modal-b>div{padding:20px 24px;display:flex;flex-direction:column;gap:14px}.az-template .modal-b>div+div{border-left:1px solid var(--rule);background:var(--paper)}.az-template .paytabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.az-template .paytabs button,.az-template .paytabs .az-template-was-btn{min-height:56px;border-radius:10px;border:1.5px solid var(--rule-strong);background:var(--sheet);font:700 15px/1 "Be Vietnam Pro",sans-serif;color:var(--ink);cursor:pointer;display:flex;gap:8px;align-items:center;justify-content:center}.az-template .paytabs button.on,.az-template .paytabs .az-template-was-btn.on{border:2px solid var(--c);background:var(--tint);color:var(--c)}.az-template .cashkeys{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.az-template .cashkeys button,.az-template .cashkeys .az-template-was-btn{min-height:50px;border-radius:10px;border:1px solid var(--rule-strong);background:var(--sheet);font:700 16px/1 "JetBrains Mono",monospace;color:var(--ink);cursor:pointer}.az-template .tables{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.az-template .ttile{border-radius:14px;border:2px solid var(--rule);background:var(--sheet);padding:14px 16px;min-height:132px;display:flex;flex-direction:column;gap:4px;text-align:left;font:500 14px/1.4 "Be Vietnam Pro",sans-serif;color:var(--ink);cursor:pointer}.az-template .ttile b{font-size:18px}.az-template .ttile.free{border-style:dashed;color:var(--ink-soft)}.az-template .ttile.busy{border-color:var(--c);background:var(--tint)}.az-template .ttile.bill{border-color:var(--warn);background:var(--wash-warn);animation:pulse 1.6s ease-in-out infinite}.az-template .ttile.resv{border-color:var(--brand-sky);border-style:dashed}@keyframes pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--warn) 45%,transparent)}50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--warn) 0%,transparent)}}@media (prefers-reduced-motion:reduce){.az-template .ttile.bill{animation:none;box-shadow:0 0 0 4px color-mix(in srgb,var(--warn) 35%,transparent)}}.az-template .menu{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.az-template .dish{border-radius:12px;border:1px solid var(--rule);background:var(--sheet);overflow:hidden;display:flex;flex-direction:column;text-align:left;padding:0;cursor:pointer;font:500 14px/1.3 "Be Vietnam Pro",sans-serif;color:var(--ink)}.az-template .dish .img{height:78px;background:repeating-linear-gradient(135deg,var(--tint) 0 12px,color-mix(in srgb,var(--c) 14%,var(--sheet)) 12px 24px)}.az-template .dish span{padding:8px 10px 10px;display:flex;flex-direction:column;gap:2px}.az-template .dish .num{color:var(--ink-soft);font-size:13px}.az-template .paper{background:#fff;color:#1b1b1b;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12.5px;line-height:1.5;padding:18px 16px;box-shadow:0 14px 26px -16px rgba(15,30,51,.45)}.az-template .paper .ln{display:flex;justify-content:space-between;gap:8px}.az-template .paper hr{border:0;border-top:1px dashed #9aa4b2;margin:7px 0}.az-template .paper .c{text-align:center}.az-template .paper .bg{font-size:15px;font-weight:700}.az-template .k80{width:300px}.az-template .k57{width:220px}.az-template .cup{width:190px;height:126px;border:1px solid #9aa4b2;border-radius:10px;background:#fff;color:#1b1b1b;font-family:"JetBrains Mono",monospace;font-size:12px;line-height:1.4;padding:10px 12px;display:flex;flex-direction:column;gap:2px}.az-template .cup b{font-size:14px}.az-template .denom{width:100%;border-collapse:collapse;font-size:14.5px}.az-template .denom td{padding:7px 10px;border-bottom:1px solid var(--rule)}.az-template .denom input{width:76px;min-height:38px;border:1.5px solid var(--rule-strong);border-radius:8px;padding:4px 8px;font:600 15px/1 "JetBrains Mono",monospace;text-align:right;background:var(--sheet);color:var(--ink)}.az-template .lock{color:var(--ink-soft)}.az-template .wave{border-radius:12px;border:1px solid var(--rule);background:var(--sheet);overflow:hidden}.az-template .wave-h{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:var(--paper);border-bottom:1px solid var(--rule);font-size:13px;font-weight:700}.az-template .wave .ln{display:flex;justify-content:space-between;padding:8px 12px;border-bottom:1px solid var(--rule);font-size:14px}.az-template .wave .ln:last-child{border:0}.az-template .qgrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}.az-template .qcell{min-height:84px;border-radius:12px;border:1.5px solid var(--rule-strong);background:var(--sheet);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font:600 14px/1.2 "Be Vietnam Pro",sans-serif;color:var(--ink);cursor:pointer}.az-template .qcell.sel{border:2px solid var(--c);background:var(--tint)}.az-template .qcell.empty{border-style:dashed;color:var(--ink-soft);font-size:22px}@media (max-width:760px){.az-template .dev{min-height:330px}.az-template .laptop{width:100%;top:20px}.az-template .laptop .scr{height:200px}.az-template .phone-f{width:120px;height:230px;border-radius:22px;padding:7px}.az-template .fcard{display:none}.az-template .shelf{overflow-x:auto;padding-bottom:6px}.az-template .shelf>.box,.az-template .shelf>.soon{flex:0 0 74%}.az-template .shelf>.shelf-grp{flex:0 0 150%}.az-template .shelf-grp>.pair{flex-wrap:nowrap}.az-template .shelf-grp .box{flex:1 1 0}.az-template .hero-h{font-size:30px}.az-template .bundle{grid-template-columns:minmax(0,1fr)}.az-template .hub{grid-template-columns:repeat(2,minmax(0,1fr))}.az-template .tl{grid-template-columns:minmax(0,1fr);row-gap:8px}.az-template .tl::before{display:none}.az-template .duo{grid-template-columns:minmax(0,1fr)}.az-template .duo>div+div{border-left:0;border-top:1px solid var(--rule)}.az-template .acct{grid-template-columns:minmax(0,1fr)}.az-template .tabs{flex-wrap:nowrap;overflow-x:auto;border-radius:14px}.az-template .chooser{grid-template-columns:minmax(0,1fr)}}.az-template .flow.v{flex-direction:column}.az-template .flow.v .link{flex:0 0 26px;justify-content:center}.az-template .flow.v .link::before{width:2px;height:100%;flex:none}.az-template .flow.v .link::after{display:none}.az-template .news-it{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--rule)}.az-template .pc{background:var(--sheet);border:1px solid var(--rule);border-radius:var(--r-l);padding:18px;display:flex;flex-direction:column;gap:10px;font-size:13.5px}.az-template .pc.hot{border:2px solid var(--c);box-shadow:0 18px 40px -26px color-mix(in srgb,var(--c) 70%,transparent)}.az-template .pc .amt{font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1.1}.az-template .pc ul{display:flex;flex-direction:column;gap:6px;flex:1}.az-template .pc li{display:flex;gap:6px;align-items:flex-start}.az-template .pc li .icon{color:var(--a);margin-top:1px;width:16px;height:16px}.az-template .hero-h{font-size:46px;line-height:1.08;font-weight:800;letter-spacing:-.02em}@media (max-width:760px){.az-template .hero-h{font-size:30px}}.az-template .tape{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));background:#fff;color:#1b1b1b;border-radius:4px;box-shadow:0 18px 30px -22px rgba(15,30,51,.5);position:relative;margin:8px 0}.az-template .tape>div{padding:20px 18px 22px;display:flex;flex-direction:column;gap:8px;border-left:2px dashed #c3ccd8;font-size:14px}.az-template .tape>div:first-child{border-left:0}.az-template .tape .no{font:600 12px/1 "JetBrains Mono",monospace;color:#56657a}.az-template .tape b{font-size:15.5px}.az-template .tape p{color:#3d4a5c}.az-template .tape::before,.az-template .tape::after{content:"";position:absolute;left:0;right:0;height:8px;background:radial-gradient(circle at 4px 0,transparent 4px,#fff 4.5px) 0 0/8px 8px repeat-x}.az-template .tape::before{top:-8px;transform:scaleY(-1)}.az-template .tape::after{bottom:-8px}.az-template .ind{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.az-template .ind a{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:var(--r-m);border:1.5px solid var(--rule);background:var(--sheet);text-decoration:none;color:var(--ink);min-height:84px}.az-template .ind a b{font-size:15px}.az-template .ind a span{font-size:12.5px;color:var(--ink-soft)}.az-template .ind a.on{border-color:var(--c);background:var(--tint)}.az-template .counter{position:relative;min-height:590px;margin:0}.az-template .counter .screen{position:absolute;left:0;top:56px;width:78%;background:#1b2a3f;border-radius:14px;padding:10px;box-shadow:0 34px 60px -38px rgba(15,30,51,.7)}.az-template .counter .screen .scr{height:330px;display:flex;flex-direction:column;gap:8px;padding:12px}.az-template .counter .rcpt{position:absolute;right:6px;top:0;width:290px;transform:rotate(2.5deg)}.az-template .devs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}.az-template .devs figure{margin:0;display:flex;flex-direction:column;gap:8px}.az-template .devs .ph{height:130px}.az-template .cmp th:not(:first-child),.az-template .cmp td:not(:first-child){text-align:center}.az-template .cmp td:first-child{font-weight:500}.az-template .cmp col.hot{background:var(--tint)}.az-template .cupwrap{position:relative;min-height:470px;margin:0}.az-template .cupwrap .screen{position:absolute;left:0;top:30px;width:82%;background:#1b2a3f;border-radius:16px;padding:10px}.az-template .cupwrap .scr{height:330px;padding:12px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;align-content:start}.az-template .cupwrap .cup{position:absolute;right:0;bottom:16px;transform:rotate(-3deg);box-shadow:0 20px 34px -20px rgba(15,30,51,.6)}@media (max-width:760px){.az-template .tape{grid-template-columns:minmax(0,1fr)}.az-template .tape>div{border-left:0;border-top:2px dashed #c3ccd8}.az-template .tape>div:first-child{border-top:0}.az-template .ind,.az-template .devs{grid-template-columns:repeat(2,minmax(0,1fr))}.az-template .counter{min-height:880px}.az-template .counter .screen{width:100%;top:0}.az-template .counter .screen .scr{height:240px}.az-template .counter .rcpt{top:290px;right:50%;margin-right:-145px;transform:none}.az-template .cupwrap{min-height:420px}.az-template .cupwrap .screen{width:100%}}.az-template .pbox{position:relative;width:340px;height:300px;margin:0 auto}.az-template .pbox .top{position:absolute;left:20px;top:22px;width:250px;height:46px;background:#e8d9b8;transform:skewX(-38deg);transform-origin:bottom left;border-radius:4px 4px 0 0}.az-template .pbox .side{position:absolute;left:250px;top:40px;width:56px;height:220px;background:#bfa678;transform:skewY(-50deg);transform-origin:top left}.az-template .pbox .face{position:absolute;left:0;top:68px;width:250px;height:220px;background:#d8c49b;border-radius:3px;padding:22px}.az-template .tem{background:#fff;color:#1b1b1b;border-radius:6px;padding:8px 10px;display:flex;gap:10px;align-items:center;font:600 11px/1.35 "JetBrains Mono",monospace;box-shadow:0 2px 8px rgba(15,30,51,.25)}.az-template .q{background:repeating-linear-gradient(90deg,#1b1b1b 0 3px,transparent 3px 6px),repeating-linear-gradient(0deg,#fff 0 3px,transparent 3px 7px);border:4px solid #fff;outline:1px solid #ccd;flex:none}.az-template .lc li span{font-size:12.5px;line-height:1.3}.az-template .lc li.cur i{box-shadow:0 0 0 6px color-mix(in srgb,var(--c) 22%,transparent)}.az-template .codechip{display:inline-flex;gap:8px;align-items:center;font:600 13px/1 "JetBrains Mono",monospace;background:var(--ink);color:var(--paper);border-radius:999px;padding:8px 14px}.az-template .nest{display:flex;align-items:center;gap:14px}.az-template .nest>div{border:2px solid var(--c);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:8px;align-items:flex-start;background:var(--sheet)}.az-template .stp-row{display:flex;flex-wrap:wrap}.az-template .stp-row span{flex:1 1 90px;text-align:center;padding:9px 6px;font-size:12.5px;font-weight:600;border-bottom:3px solid var(--rule);color:var(--ink-soft)}.az-template .stp-row span.done{border-color:var(--c);color:var(--c)}.az-template .stp-row span.now{border-color:var(--c);background:var(--tint);color:var(--ink)}.az-template .bar{height:8px;border-radius:999px;background:var(--paper);overflow:hidden;border:1px solid var(--rule)}.az-template .bar i{display:block;height:100%;background:var(--c)}.az-template .vtl li{display:grid;grid-template-columns:30px 150px minmax(0,1fr);gap:12px;padding:11px 0;border-bottom:1px solid var(--rule);align-items:center;font-size:14px}.az-template .vtl li i{width:26px;height:26px;border-radius:999px;border:2px solid var(--rule-strong);display:flex;align-items:center;justify-content:center;font-style:normal;color:var(--ink-soft)}.az-template .vtl li.done i{background:var(--c);border-color:var(--c);color:var(--on-c)}.az-template .vtl li:not(.done){color:var(--ink-soft)}.az-template .temx{background:#fff;border:1px solid #b7c3d1;border-radius:4px;display:flex;align-items:center;gap:6px;padding:6px;color:#1b1b1b;font:600 10px/1.25 "JetBrains Mono",monospace}.az-template .lockbox{border:1.5px solid var(--warn);background:var(--wash-warn);border-radius:12px;padding:14px;display:flex;gap:12px;align-items:flex-start}.az-template .stamp-ok{display:inline-flex;align-items:center;gap:8px;border:3px solid var(--c);color:var(--c);border-radius:12px;padding:8px 14px;font-weight:800;transform:rotate(-5deg);background:var(--sheet)}.az-template .ear{position:relative;width:260px;height:190px;border-radius:90px 90px 70px 70px;background:#eef1f5;border:2px solid #cdd6e1;margin:40px auto 0}.az-template .ear::after{content:"";position:absolute;left:18px;right:18px;top:62px;height:2px;background:#cdd6e1}.az-template .map{position:relative;border-radius:var(--r-l);overflow:hidden;border:1px solid var(--rule);background:linear-gradient(90deg,transparent calc(100% - 1px),color-mix(in srgb,var(--rule) 80%,transparent) 0) 0 0/72px 72px,linear-gradient(0deg,transparent calc(100% - 1px),color-mix(in srgb,var(--rule) 80%,transparent) 0) 0 0/72px 72px,color-mix(in srgb,var(--wash-green) 60%,var(--sheet))}.az-template .map .rd{position:absolute;background:var(--sheet);border:1px solid var(--rule-strong)}.az-template .map svg{position:absolute;inset:0;width:100%;height:100%}.az-template .pin{position:absolute;display:flex;flex-direction:column;align-items:center;gap:3px;transform:translate(-50%,-100%)}.az-template .pin i{width:16px;height:16px;border-radius:999px;background:var(--sheet);border:3px solid var(--c);box-shadow:0 2px 6px rgba(15,30,51,.3)}.az-template .pin.done i{background:var(--c)}.az-template .pin.me i{background:var(--brand-sky);border-color:#fff;width:18px;height:18px;box-shadow:0 0 0 7px color-mix(in srgb,var(--brand-sky) 30%,transparent)}.az-template .pin span{font:600 11px/1.2 "Be Vietnam Pro",sans-serif;background:var(--sheet);color:var(--ink);padding:3px 7px;border-radius:6px;border:1px solid var(--rule);white-space:nowrap}.az-template .layer{display:flex;flex-direction:column;gap:8px;font-size:14px}.az-template .kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.az-template .app .scan{background:#0f1e33;min-height:230px;display:flex;align-items:center;justify-content:center;color:#c9d4e2}@media (max-width:760px){.az-template .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.az-template .nest{flex-direction:column;align-items:stretch}.az-template .lc li span{font-size:11.5px}.az-template .pbox{transform:scale(.85);transform-origin:top center}}.az-template .clock{display:inline-flex;gap:4px;align-items:center;font:600 11.5px/1 "JetBrains Mono",monospace;color:var(--warn);background:var(--wash-warn);border-radius:999px;padding:3px 8px;align-self:flex-start}.az-template .day{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;position:relative}.az-template .day::before{content:"";position:absolute;left:0;right:0;top:15px;height:2px;background:var(--rule-strong)}.az-template .day>li{position:relative;display:flex;flex-direction:column;gap:8px;padding-top:40px}.az-template .day>li::before{content:"";position:absolute;left:0;top:8px;width:16px;height:16px;border-radius:999px;background:var(--sheet);border:4px solid var(--c);box-sizing:border-box}.az-template .day time{font:700 20px/1 "JetBrains Mono",monospace;color:var(--c)}.az-template .ways{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.az-template .ways button,.az-template .ways .az-template-was-btn{display:flex;flex-direction:column;gap:6px;text-align:left;padding:16px;min-height:150px;border-radius:var(--r-m);border:1.5px solid var(--rule);background:var(--sheet);color:var(--ink);font:500 13.5px/1.45 "Be Vietnam Pro",sans-serif;cursor:pointer}.az-template .ways button b,.az-template .ways .az-template-was-btn b{font-size:15.5px}.az-template .ways button.on,.az-template .ways .az-template-was-btn.on{border:2px solid var(--c);background:var(--tint)}.az-template .setup{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border:1px solid var(--rule);border-radius:var(--r-m);overflow:hidden;background:var(--sheet)}.az-template .setup>div{padding:16px 18px;display:flex;flex-direction:column;gap:6px}.az-template .setup>div+div{border-left:1px solid var(--rule)}.az-template .lanes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.az-template .lane{background:var(--paper);border-radius:var(--r-m);padding:14px;display:flex;flex-direction:column;gap:8px}.az-template .lane h3{font-size:14px;display:flex;justify-content:space-between}.az-template .lane li{background:var(--sheet);border:1px solid var(--rule);border-radius:10px;padding:10px 12px;font-size:13.5px}.az-template .track{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.az-template .track>div{border-top:6px solid var(--c);padding:18px 4px 0;display:flex;flex-direction:column;gap:8px}.az-template .track>div.later{border-top-style:dashed;border-top-color:var(--rule-strong)}.az-template .flow.big .node{padding:18px 16px;gap:8px}.az-template .flow.big .node b{font-size:17px}@media (max-width:760px){.az-template .day{grid-template-columns:minmax(0,1fr)}.az-template .day::before{display:none}.az-template .ways{grid-template-columns:minmax(0,1fr)}.az-template .ways button,.az-template .ways .az-template-was-btn{min-height:0}.az-template .setup{grid-template-columns:minmax(0,1fr)}.az-template .setup>div+div{border-left:0;border-top:1px solid var(--rule)}.az-template .lanes,.az-template .track{grid-template-columns:minmax(0,1fr)}}.az-template .seal{width:112px;height:112px;color:#c1272d;transform:rotate(-11deg);opacity:.92;flex:none}.az-template .seal svg{width:100%;height:100%;display:block}.az-template .seal text{font-family:"Be Vietnam Pro",sans-serif;font-weight:700;fill:currentColor}.az-template .slip{background:#fff;color:#151a2d;border:1px solid #dadde7;border-radius:6px;padding:24px 28px;position:relative;font-family:"Noto Serif",Georgia,serif;box-shadow:0 18px 36px -26px rgba(21,26,45,.45)}.az-template .slip .hd{display:flex;justify-content:space-between;gap:16px;font-size:12.5px;line-height:1.45}.az-template .slip h3{text-align:center;font:600 22px/1.2 "Noto Serif",Georgia,serif;letter-spacing:.08em;margin:14px 0 2px}.az-template .slip .no{text-align:center;font-size:13px}.az-template .slip .fld{display:grid;grid-template-columns:180px 1fr;gap:8px 12px;font-size:14px;margin-top:16px}.az-template .slip .fld dd{border-bottom:1px dotted #9aa4b2;margin:0}.az-template .slip .seal{position:absolute;right:22px;top:70px}.az-template .entry{width:100%;border-collapse:collapse;font-size:14px;background:var(--sheet)}.az-template .entry th{font-size:12.5px;color:var(--ink-soft);text-align:left;padding:8px 10px;border-bottom:1px solid var(--rule-strong);background:var(--paper)}.az-template .entry td{padding:9px 10px;border-bottom:1px solid var(--rule)}.az-template .entry .r{text-align:right}.az-template .acc{font-family:"JetBrains Mono",monospace;font-weight:600}.az-template .cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}.az-template .cal>b{font-size:12px;color:var(--ink-soft);text-align:center}.az-template .cal>span{min-height:78px;border:1px solid var(--rule);border-radius:8px;padding:6px 7px;font-size:12px;background:var(--sheet);display:flex;flex-direction:column;gap:3px}.az-template .cal>span.due{border:2px solid var(--c);background:var(--tint)}.az-template .cal>span.off{opacity:.45}.az-template .tree li{padding:7px 10px;border-bottom:1px solid var(--rule);display:grid;grid-template-columns:90px 1fr 140px;gap:10px;font-size:14px}.az-template .tree li.l2{padding-left:30px}.az-template .chat{display:flex;flex-direction:column;gap:10px}.az-template .bub{max-width:82%;padding:10px 14px;border-radius:16px;font-size:14px;line-height:1.5}.az-template .bub.me{align-self:flex-end;background:var(--c);color:var(--on-c);border-bottom-right-radius:4px}.az-template .bub.ai{align-self:flex-start;background:var(--sheet);border:1px solid var(--rule);border-bottom-left-radius:4px}.az-template .bub.ai.grad{border:0;background:linear-gradient(var(--sheet),var(--sheet)) padding-box,var(--grad) border-box;border:2px solid transparent}.az-template .chatbox{background:var(--sheet);border:1px solid var(--rule);border-radius:var(--r-l);overflow:hidden;display:flex;flex-direction:column;box-shadow:0 30px 60px -40px rgba(15,30,51,.55)}.az-template .chatbox .ch{display:flex;gap:10px;align-items:center;padding:14px 16px;border-bottom:1px solid var(--rule)}.az-template .chatbox .cb{padding:16px;display:flex;flex-direction:column;gap:10px;background:var(--paper);flex:1}.az-template .chatbox .cf{display:flex;gap:8px;padding:12px;border-top:1px solid var(--rule)}.az-template .sugg{display:flex;gap:8px;flex-wrap:wrap}.az-template .meter{height:12px;border-radius:999px;background:var(--paper);border:1px solid var(--rule);overflow:hidden}.az-template .meter i{display:block;height:100%;background:var(--c)}.az-template .keybox{font-family:"JetBrains Mono",monospace;background:var(--paper);border:1.5px dashed var(--c);border-radius:10px;padding:12px 14px;font-size:14px;word-break:break-all}.az-template .wiz{display:grid;grid-template-columns:260px minmax(0,1fr);gap:0;border:1px solid var(--rule);border-radius:var(--r-l);overflow:hidden;background:var(--sheet)}.az-template .wiz ol{background:var(--paper);padding:18px;display:flex;flex-direction:column;gap:6px;border-right:1px solid var(--rule)}.az-template .wiz ol li{padding:9px 12px;border-radius:10px;font-size:14px;display:flex;gap:8px;align-items:center}.az-template .wiz ol li.done{color:var(--ink-soft)}.az-template .wiz ol li.on{background:var(--tint);color:var(--c);font-weight:700}.az-template .wiz>div{padding:26px 30px;display:flex;flex-direction:column;gap:16px}.az-template .size{display:grid;gap:4px}.az-template .vgrid{display:grid;gap:4px;font-size:13px}.az-template .vgrid span{border:1px solid var(--rule);border-radius:6px;padding:6px;text-align:center;background:var(--sheet)}.az-template .vgrid span.on{border:2px solid var(--c);background:var(--tint)}.az-template .vgrid span.zero{color:var(--ink-soft);background:var(--paper)}.az-template .sched{display:grid;grid-template-columns:70px repeat(4,minmax(0,1fr));font-size:12.5px;border:1px solid var(--rule);border-radius:10px;overflow:hidden;background:var(--sheet)}.az-template .sched>*{border-bottom:1px solid var(--rule);border-right:1px solid var(--rule);min-height:34px;padding:5px 7px}.az-template .sched .bk{background:var(--tint);border-left:3px solid var(--c);font-weight:600}@media (max-width:760px){.az-template .wiz{grid-template-columns:minmax(0,1fr)}.az-template .wiz ol{border-right:0;border-bottom:1px solid var(--rule)}.az-template .cal{gap:3px}.az-template .cal>span{min-height:54px}}.az-template .ai-tag{display:inline-flex;align-items:center;gap:7px;padding:3px 10px;border-radius:999px;background:var(--wash-blue);color:var(--link);font:600 12.5px/1.3 "Be Vietnam Pro",sans-serif}.az-template .ai-tag::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--grad)}.az-template .hero-chat{display:grid;grid-template-columns:minmax(0,1fr) 470px;gap:56px;align-items:center}.az-template .chatbox .cf .input{flex:1;min-height:44px}.az-template .chatbox .who{width:38px;height:38px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font:800 15px/1 "Be Vietnam Pro",sans-serif;flex:none}.az-template .typing{display:inline-flex;gap:5px;padding:12px 14px;align-self:flex-start;background:var(--sheet);border:1px solid var(--rule);border-radius:16px}.az-template .typing i{width:7px;height:7px;border-radius:50%;background:var(--ink-soft);opacity:.55}.az-template .handoff{align-self:center;font-size:12.5px;color:var(--ink-soft);display:flex;gap:8px;align-items:center}.az-template .handoff::before,.az-template .handoff::after{content:"";width:40px;height:1px;background:var(--rule-strong)}.az-template .chan{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}.az-template .phn{border:1px solid var(--rule-strong);border-radius:30px;background:var(--sheet);padding:12px;display:flex;flex-direction:column;gap:10px;box-shadow:0 24px 48px -36px rgba(15,30,51,.6)}.az-template .phn .hd{display:flex;gap:10px;align-items:center;padding:6px 6px 10px;border-bottom:1px solid var(--rule)}.az-template .phn .bd{display:flex;flex-direction:column;gap:8px;min-height:300px;background:var(--paper);border-radius:18px;padding:12px}.az-template .phn .bub{font-size:13px;max-width:88%}.az-template .chan-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--tint);color:var(--c);font:700 12px/1 "Be Vietnam Pro",sans-serif;flex:none}.az-template .dos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid var(--rule);border-radius:var(--r-l);overflow:hidden;background:var(--sheet)}.az-template .dos>div{padding:26px 28px;display:flex;flex-direction:column;gap:12px}.az-template .dos>div+div{border-left:1px solid var(--rule);background:var(--paper)}.az-template .dos ul{display:flex;flex-direction:column;gap:10px}.az-template .dos li{display:flex;gap:10px;align-items:flex-start}.az-template .dos li .icon{margin-top:3px;color:var(--a)}.az-template .dos .no li .icon{color:var(--danger)}.az-template .est{display:grid;grid-template-columns:minmax(0,1fr) 400px;border:1px solid var(--rule);border-radius:var(--r-l);overflow:hidden;background:var(--sheet)}.az-template .est>div{padding:26px 28px;display:flex;flex-direction:column;gap:16px}.az-template .est>div+div{background:var(--tint);border-left:1px solid var(--rule)}.az-template .range{height:8px;border-radius:999px;background:var(--rule);position:relative;margin:14px 0 6px}.az-template .range i{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:var(--c)}.az-template .range b{position:absolute;top:50%;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;background:var(--sheet);border:3px solid var(--c)}.az-template .big-n{font-size:44px;line-height:1.05;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}.az-template .chain{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:18px}.az-template .chain>div{border:1px solid var(--rule);border-radius:12px;padding:12px 14px;background:var(--sheet);display:flex;flex-direction:column;gap:4px;position:relative;font-size:14px}.az-template .chain>div+div::before{content:"›";position:absolute;left:-10px;top:50%;transform:translate(-50%,-50%);color:var(--ink-soft);font-weight:800}.az-template .chain>div.on{border:2px solid var(--c);background:var(--tint)}.az-template .paym{display:grid;gap:10px}.az-template .paym>label{display:flex;gap:12px;align-items:center;border:1.5px solid var(--rule-strong);border-radius:12px;padding:12px 16px;background:var(--sheet);cursor:pointer;font-size:15px}.az-template .paym>label.on{border:2px solid var(--c);background:var(--tint)}.az-template .paym input{width:18px;height:18px;accent-color:var(--c);margin:0}.az-template .paym .lg{width:40px;height:28px;border-radius:6px;border:1px solid var(--rule);background:var(--paper);display:grid;place-items:center;font:700 10.5px/1 "Be Vietnam Pro",sans-serif;color:var(--ink-soft)}.az-template .otp{display:flex;gap:8px}.az-template .otp>span{width:44px;height:52px;border:1.5px solid var(--rule-strong);border-radius:10px;display:grid;place-items:center;font:700 22px/1 "JetBrains Mono",monospace;background:var(--sheet)}.az-template .otp>span.f{border-color:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 22%,transparent)}.az-template .or{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-soft)}.az-template .or::before,.az-template .or::after{content:"";flex:1;height:1px;background:var(--rule)}.az-template .panes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.az-template .pane{border:1px solid var(--rule);border-radius:12px;background:var(--sheet);overflow:hidden}.az-template .pane>h4{margin:0;padding:10px 14px;font-size:14px;background:var(--paper);border-bottom:1px solid var(--rule);display:flex;justify-content:space-between;align-items:center;gap:10px}.az-template .pane table{width:100%;border-collapse:collapse;font-size:13.5px}.az-template .pane th{font-size:12px;color:var(--ink-soft);text-align:left;padding:7px 10px;border-bottom:1px solid var(--rule);font-weight:600}.az-template .pane td{padding:8px 10px;border-bottom:1px solid var(--rule)}.az-template .pane .r{text-align:right;font-family:"JetBrains Mono",monospace}.az-template .diff{color:var(--danger);font-weight:700}.az-template .hb{display:grid;gap:10px}.az-template .hb>div{display:grid;grid-template-columns:190px minmax(0,1fr) 120px;gap:12px;align-items:center;font-size:13.5px}.az-template .hb i{display:block;height:12px;border-radius:6px;background:var(--c)}.az-template .hb>div>span:last-child{text-align:right;font-family:"JetBrains Mono",monospace}.az-template .colch{display:flex;align-items:flex-end;gap:5px;height:150px;border-bottom:1px solid var(--rule-strong);position:relative}.az-template .colch>i{flex:1;background:var(--c);border-radius:3px 3px 0 0}.az-template .colch>i.fut{background:var(--rule)}.az-template .colch .tgt{position:absolute;left:0;right:0;border-top:2px dashed var(--warn)}.az-template .colch .tgt span{position:absolute;right:0;top:-20px;font-size:11.5px;color:var(--warn);font-weight:700}.az-template .rooms{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.az-template .room{min-height:132px;border:1.5px solid var(--rule-strong);border-radius:14px;padding:12px 14px;background:var(--sheet);display:flex;flex-direction:column;gap:4px;text-align:left;font:inherit;color:inherit;cursor:pointer}.az-template .room.use{background:var(--tint);border-color:var(--c)}.az-template .room.resv{border-style:dashed;border-color:var(--c)}.az-template .room.clean{background:var(--wash-warn);border-color:var(--warn)}.az-template .room .tm{font:700 22px/1.1 "JetBrains Mono",monospace}.az-template .lot{display:inline-flex;align-items:center;gap:4px;font:600 12px/1.3 "JetBrains Mono",monospace;padding:2px 8px;border-radius:6px;background:var(--wash-green);color:var(--green-text)}.az-template .lot.warn{background:var(--wash-warn);color:var(--warn)}.az-template .serial{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;padding:2px 8px;border-radius:6px;border:1px solid var(--rule-strong);font-weight:600}.az-template .serial.ok{border-color:var(--green-text);color:var(--green-text)}.az-template .serial.need{border-color:var(--warn);color:var(--warn);background:var(--wash-warn)}.az-template .sheet-in{width:100%;border-collapse:collapse;font-size:14px;background:var(--sheet)}.az-template .sheet-in th{background:var(--paper);font-size:12px;color:var(--ink-soft);text-align:left;padding:7px 8px;border:1px solid var(--rule);font-weight:600}.az-template .sheet-in td{padding:8px;border:1px solid var(--rule)}.az-template .sheet-in td.r{text-align:right;font-family:"JetBrains Mono",monospace}.az-template .sheet-in td.cur{outline:2px solid var(--c);outline-offset:-2px;background:var(--tint)}.az-template .photo{border-radius:10px;background:linear-gradient(135deg,#c9d4e2,#8ea1b8);position:relative;min-height:84px}.az-template .photo>span{position:absolute;left:6px;bottom:6px;font:600 10.5px/1.2 "JetBrains Mono",monospace;color:#fff;background:rgba(15,30,51,.72);padding:2px 6px;border-radius:4px}.az-template .cover{display:flex;flex-wrap:wrap;gap:8px}.az-template .cover>span{padding:6px 12px;border-radius:8px;background:var(--paper);border:1px solid var(--rule);font-size:13.5px}.az-template .cover>span.on{background:var(--tint);border-color:var(--c);color:var(--c);font-weight:600}.az-template .boxes{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.az-template .boxes>button,.az-template .boxes>.az-template-was-btn{border:1.5px solid var(--rule-strong);border-radius:12px;background:var(--sheet);padding:12px;display:flex;flex-direction:column;gap:2px;text-align:left;font:inherit;color:inherit;cursor:pointer;min-height:64px}.az-template .boxes>button.on,.az-template .boxes>.az-template-was-btn.on{border:2px solid var(--c);background:var(--tint)}.az-template .cardp{border:1px solid var(--rule);border-radius:var(--r-l);background:var(--sheet);padding:20px 22px;display:flex;flex-direction:column;gap:12px;border-top:5px solid var(--c)}.az-template .conn{border:1px solid var(--rule);border-radius:var(--r-l);background:var(--sheet);padding:18px 20px;display:flex;flex-direction:column;gap:10px}.az-template .conn .lg{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--paper);border:1px solid var(--rule);font:800 14px/1 "Be Vietnam Pro",sans-serif;color:var(--ink-soft)}.az-template .conn.sel{border:2px solid var(--c)}.az-template .log{font-family:"JetBrains Mono",monospace;font-size:12.5px}.az-template .calc-r{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px dashed var(--rule-strong);font-size:14.5px}.az-template .calc-r:last-child{border-bottom:0}.az-template .wiz-top{display:flex;align-items:center;gap:14px}.az-template .wiz-top .bar{flex:1}@media (max-width:760px){.az-template .hero-chat,.az-template .chan,.az-template .dos,.az-template .est,.az-template .panes{grid-template-columns:minmax(0,1fr)}.az-template .dos>div+div,.az-template .est>div+div{border-left:0;border-top:1px solid var(--rule)}.az-template .boxes{grid-template-columns:repeat(2,minmax(0,1fr))}.az-template .chain{grid-auto-flow:row}.az-template .chain>div+div::before{content:none}.az-template .rooms{grid-template-columns:repeat(2,minmax(0,1fr))}.az-template .hb>div{grid-template-columns:110px minmax(0,1fr) 90px}}:root[data-theme="dark"] .az-template{--ink:#e6edf5;--ink-soft:#9fb0c4;--paper:#0b1522;--sheet:#121e2d;--rule:#22324a;--rule-strong:#34465f;--primary:#5ba7f0;--on-primary:#0b1522;--link:#5ba7f0;--wash-blue:#13283f;--wash-green:#10301f;--warn:#e7ad55;--wash-warn:#2e2410;--danger:#ff7b80;--brand-blue:#5ba7f0;--brand-sky:#8cc2f5;--brand-teal:#46c5c0;--brand-green:#4fd38f;--teal-text:#46c5c0;--green-text:#4fd38f;--foot:#060d16;--foot-ink:#9fb0c4}:root[data-theme="dark"] .az-template .ledger{background-color:#17202c;color:#e6edf5;border-color:#34465f;background-image:repeating-linear-gradient(transparent 0 33px,#22324a 33px 34px)}@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .az-template{--ink:#e6edf5;--ink-soft:#9fb0c4;--paper:#0b1522;--sheet:#121e2d;--rule:#22324a;--rule-strong:#34465f;--primary:#5ba7f0;--on-primary:#0b1522;--link:#5ba7f0;--wash-blue:#13283f;--wash-green:#10301f;--warn:#e7ad55;--wash-warn:#2e2410;--danger:#ff7b80;--brand-blue:#5ba7f0;--brand-sky:#8cc2f5;--brand-teal:#46c5c0;--brand-green:#4fd38f;--teal-text:#46c5c0;--green-text:#4fd38f;--foot:#060d16;--foot-ink:#9fb0c4}:root:not([data-theme="light"]) .az-template .ledger{background-color:#17202c;color:#e6edf5;border-color:#34465f;background-image:repeating-linear-gradient(transparent 0 33px,#22324a 33px 34px)}} /* mau san pham (lop .p-* cua body - 'site'.theme.p) cho phan rieng cua khung */ .az-template { --c-main: var(--c); --c-on-main: var(--on-c); --c-accent: var(--a); --c-wash: var(--tint); } :root { --c-main: #087a40; --c-on-main: #ffffff; --c-wash: #e3f6ec; --c-accent: #0cba60; --paper: #f4f7fb; --sheet: #ffffff; --ink: #0f1e33; --ink-soft: #4b5b70; --rule: #d6dee8; --rule-strong: #b7c3d1; --link: #0057a3; --ok: #087a40; --ok-wash: #e3f6ec; --warn: #8f5400; --warn-wash: #faefdc; --danger: #c62f36; --danger-wash: #fbe8e9; --grad: linear-gradient(45deg, #006cc6 0%, #069096 52%, #0cba60 100%); --shadow: 0 1px 0 rgba(15, 30, 51, .04), 0 16px 36px -18px rgba(15, 30, 51, .28); --f-sans: "Be Vietnam Pro", "Segoe UI", system-ui, -apple-system, sans-serif; --f-num: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace; --wrap: 1200px; --gut: 32px; --radius: 12px; --pill: 999px; color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --c-main: #4fd38f; --c-on-main: #0b1522; --c-wash: #10301f; --c-accent: #4fd38f; --paper: #0b1522; --sheet: #121e2d; --ink: #e6edf5; --ink-soft: #9fb0c4; --rule: #22324a; --rule-strong: #34465f; --link: #5ba7f0; --ok: #4fd38f; --ok-wash: #10301f; --warn: #e7ad55; --warn-wash: #33260f; --danger: #ff7b80; --danger-wash: #3b1b20; --shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 16px 36px -18px rgba(0, 0, 0, .7); color-scheme: dark; } } :root[data-theme="dark"] { --c-main: #4fd38f; --c-on-main: #0b1522; --c-wash: #10301f; --c-accent: #4fd38f; --paper: #0b1522; --sheet: #121e2d; --ink: #e6edf5; --ink-soft: #9fb0c4; --rule: #22324a; --rule-strong: #34465f; --link: #5ba7f0; --ok: #4fd38f; --ok-wash: #10301f; --warn: #e7ad55; --warn-wash: #33260f; --danger: #ff7b80; --danger-wash: #3b1b20; --shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 16px 36px -18px rgba(0, 0, 0, .7); color-scheme: dark; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-padding-top: 76px; } body.az-template { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.65 var(--f-sans); overflow-x: hidden; } .az-template h1, .az-template h2, .az-template h3, .az-template p, .az-template ul, .az-template ol, .az-template figure, .az-template dl, .az-template dd { margin: 0; } .az-template ul, .az-template ol { padding: 0; list-style: none; } .az-template a { color: var(--link); text-underline-offset: .18em; } .az-template a:hover { color: var(--ink); } .az-template img { max-width: 100%; height: auto; } .az-template table { border-collapse: collapse; width: 100%; } .az-template :focus-visible { outline: 2px solid var(--c-main); outline-offset: 2px; } .az-template summary { cursor: pointer; } .az-template [hidden] { display: none !important; } @media (prefers-reduced-motion: reduce) { .az-template * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } } } @layer az-template.layout { .az-template-wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); } .az-template-narrow { max-width: 820px; } .az-template-skip { position: absolute; left: -999px; top: 0; padding: 8px 12px; background: var(--c-main); color: var(--c-on-main); z-index: 60; } .az-template-skip:focus { left: 8px; } .az-template-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* dai ban thu : chi hien tren ten mien thu (Layout kiem host) */ .az-template-ribbon { background: repeating-linear-gradient(135deg, var(--warn-wash) 0 14px, transparent 14px 28px), var(--sheet); border-bottom: 1px solid var(--rule); font-size: 13px; color: var(--warn); } .az-template-ribbon p { padding: 6px 0; } /* vo web 1.0 (canvas 00 V1 - V4) : dau trang dinh, dau tron «AZ» khi chua co logo, menu dien thoai mo bang nut */ .az-template .hdr { position: sticky; top: 0; z-index: 30; } .az-template .hdr .brand { flex: none; } .az-template .hdr .brand > span:last-child { min-width: 0; } .az-template .nav a:hover { color: var(--c); } .az-template .nav .az-template-nav-cta, .az-template .nav .az-template-nav-login { display: none; } .az-template-brand-seal { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--grad); color: #ffffff; font: 800 11px/1 var(--f-sans); letter-spacing: 0; flex: none; } .az-template-brand-logo { width: 34px; height: 34px; object-fit: contain; } .az-template .logo-box .az-template-brand-logo { width: auto; height: 40px; } .az-template-wordmark { font-weight: 800; font-size: 20px; letter-spacing: -.01em; color: #0f1e33; line-height: 40px; } .az-template .strip a, .az-template .offer a { text-decoration: none; } .az-template .strip b a { color: var(--ink); } .az-template .offer b a { color: #ffffff; } .az-template .offer { background: var(--foot); } /* giao dien toi : --ink sang -> dai uu dai dung mau chan trang */ .az-template .ftr a:hover { text-decoration: underline; } .az-template .ftr nav ul { margin: 0; } .az-template .ftr-legal .num, .az-template .ftr-legal a { color: #e6edf5; } .az-template .mbar { z-index: 40; padding-bottom: calc(10px + env(safe-area-inset-bottom)); } @media (max-width: 760px) { .az-template .hdr .wrap { position: relative; } .az-template .hdr-act .az-template-hdr-cta { padding: 0 14px; } .az-template .nav.is-open { display: flex; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 0; padding: 6px 18px 14px; background: var(--sheet); border-bottom: 1px solid var(--rule); box-shadow: 0 18px 30px -22px rgba(15, 30, 51, .5); } .az-template .nav.is-open a { padding: 12px 0; border-bottom: 1px solid var(--rule); box-shadow: none; } .az-template .nav.is-open .az-template-nav-login { display: block; } } @media (max-width: 420px) { .az-template .hdr .brand-sub { display: none; } .az-template .hdr-act .az-template-hdr-cta { display: none; } /* nut chinh van o thanh duoi (mbar) */ .az-template .hdr .brand { flex: 0 1 auto; min-width: 0; } .az-template .hdr .brand-name { line-height: 1.2; } } .az-template-main { min-height: 50vh; } } @layer az-template.components { .az-template-num { font-family: var(--f-num); font-variant-numeric: tabular-nums; letter-spacing: -.01em; } .az-template-muted { color: var(--ink-soft); } .az-template-note { font-size: 13.5px; color: var(--ink-soft); } .az-template-kicker { display: inline-block; padding: 3px 12px; border-radius: var(--pill); background: var(--c-wash); color: var(--ink); font-size: 13px; font-weight: 600; margin-bottom: 14px !important; } .az-template-h1 { font-size: clamp(28px, 3.4vw, 38px); line-height: 1.14; letter-spacing: -.015em; font-weight: 800; } .az-template-h1-long { font-size: clamp(26px, 3.2vw, 36px); line-height: 1.22; } .az-template-h2 { font-size: clamp(24px, 2.6vw, 30px); line-height: 1.18; letter-spacing: -.01em; font-weight: 800; margin-bottom: 10px !important; } .az-template-h3 { font-size: 18px; line-height: 1.35; font-weight: 700; margin-bottom: 6px !important; } .az-template-lead { font-size: clamp(16.5px, 1.7vw, 19px); color: var(--ink-soft); margin-top: 12px !important; max-width: 68ch; } .az-template-sechead { margin-bottom: 22px; } .az-template-sechead .az-template-lead { margin-top: 4px !important; } .az-template-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 10px 22px; font-weight: 600; border-radius: var(--pill); border: 1px solid var(--rule-strong); background: var(--sheet); color: var(--ink) !important; font: 600 15px/1.2 var(--f-sans); text-decoration: none; cursor: pointer; } .az-template-btn:hover { border-color: var(--c-main); } .az-template-btn-main { background: var(--c-main); border-color: var(--c-main); color: var(--c-on-main) !important; } .az-template-btn-main:hover { filter: brightness(1.08); } .az-template-btn.is-busy { opacity: .7; cursor: progress; } .az-template-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px !important; } .az-template-hero { padding: 56px 0 44px; background: radial-gradient(1200px 360px at 85% -10%, var(--c-wash), transparent 70%); } .az-template-hero-soon { text-align: left; } .az-template-sec { padding: 64px 0; } @media (max-width: 760px) { .az-template-sec { padding: 44px 0; } .az-template-wrap { padding: 0 18px; } } .az-template-sec + .az-template-sec { border-top: 1px solid var(--rule); } .az-template-sec-sheet { background: var(--sheet); } .az-template-sec-wash { background: var(--c-wash); } .az-template-pagehead { padding: 36px 0 26px; } .az-template-crumbs { padding-top: 16px; font-size: 13.5px; } .az-template-crumbs ol { display: flex; flex-wrap: wrap; gap: 4px; } .az-template-crumbs li + li::before { content: "›"; margin-right: 6px; color: var(--ink-soft); } .az-template-crumbs a { color: var(--ink-soft); } .az-template-cards { display: grid; gap: 16px; } .az-template-cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .az-template-cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .az-template-cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 980px) { .az-template-cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .az-template-cards-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px) { .az-template-cards-2, .az-template-cards-3, .az-template-cards-4 { grid-template-columns: 1fr; } } .az-template-card { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius); padding: 24px; min-width: 0; } .az-template-sec-sheet .az-template-card { background: var(--paper); box-shadow: none; } .az-template-card p + p { margin-top: 8px; } .az-template-card-t { font-weight: 700; margin-bottom: 4px !important; } .az-template-tag { display: inline-block; margin-bottom: 8px !important; padding: 1px 10px; border-radius: var(--pill); border: 1px solid var(--c-accent); color: var(--ink); font-size: 12.5px; font-weight: 600; } .az-template-price { margin-top: 10px !important; font-weight: 800; font-size: 22px; } .az-template-price small { font-size: 13px; font-weight: 500; color: var(--ink-soft); } .az-template-steps { counter-reset: step; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } .az-template-steps > li { counter-increment: step; position: relative; padding: 16px 16px 14px 56px; background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius); } .az-template-steps > li::before { content: counter(step); position: absolute; left: 14px; top: 14px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--c-main); color: var(--c-on-main); font: 700 14px/1 var(--f-num); } /* so do dong chay : the noi mui ten */ .az-template-flow { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; } .az-template-flow > li { flex: 1 1 150px; position: relative; padding: 14px 14px 12px; background: var(--sheet); border: 1px solid var(--rule); border-top: 3px solid var(--c-accent); border-radius: var(--radius); min-width: 0; } .az-template-flow > li + li::before { content: "→"; position: absolute; left: -10px; top: 50%; transform: translate(-50%, -50%); color: var(--c-main); font-weight: 700; } .az-template-flow p { font-size: 14px; color: var(--ink-soft); } @media (max-width: 760px) { .az-template-flow { flex-direction: column; } .az-template-flow > li { flex: 0 0 auto; } .az-template-flow > li + li { margin-top: 14px; } .az-template-flow > li + li::before { content: "↓"; left: 50%; top: -12px; } } .az-template-list li { position: relative; padding-left: 22px; margin: 6px 0; } .az-template-list li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--c-accent); } .az-template-tablewrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--sheet); } .az-template-table th, .az-template-table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--rule); vertical-align: top; } .az-template-table thead th { background: var(--c-wash); font-size: 14px; } .az-template-table tbody tr:last-child > * { border-bottom: 0; } .az-template-faq details { border-bottom: 1px solid var(--rule); padding: 12px 0; } .az-template-faq summary { font-weight: 600; list-style: none; position: relative; padding-right: 28px; } .az-template-faq summary::-webkit-details-marker { display: none; } .az-template-faq summary::after { content: "+"; position: absolute; right: 4px; top: -2px; font-size: 20px; color: var(--c-main); } .az-template-faq details[open] summary::after { content: "−"; } .az-template-faq details p { margin-top: 8px; color: var(--ink-soft); } .az-template-ctabox { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding: 28px; border-radius: calc(var(--radius) + 4px); background: var(--c-wash); border: 1px solid var(--rule); } .az-template-ctabox .az-template-actions { margin-top: 0 !important; } .az-template-notice { padding: 12px 16px; border-left: 4px solid var(--c-main); background: var(--c-wash); border-radius: 0 var(--radius) var(--radius) 0; } .az-template-notice-warn { border-left-color: var(--warn); background: var(--warn-wash); } /* khoi giu cho : chi tren ten mien thu */ .az-template-ph { border: 2px dashed var(--rule-strong); border-radius: var(--radius); padding: 18px 20px; background: repeating-linear-gradient(135deg, transparent 0 12px, color-mix(in srgb, var(--rule) 35%, transparent) 12px 24px); } .az-template-ph-n { display: inline-block; min-width: 28px; margin-right: 8px; padding: 1px 8px; border-radius: var(--pill); background: var(--ink); color: var(--paper); font: 700 12px/1.6 var(--f-num); text-align: center; } .az-template-ph-t { font-weight: 700; } .az-template-ph-x { margin-top: 6px !important; color: var(--ink-soft); font-size: 14.5px; } .az-template-ph-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px !important; } .az-template-ph-tags li { padding: 0 8px; border: 1px solid var(--rule-strong); border-radius: var(--pill); font-size: 12px; color: var(--ink-soft); } /* bieu mau */ .az-template-formgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 32px; align-items: start; } @media (max-width: 860px) { .az-template-formgrid { grid-template-columns: 1fr; } } .az-template-formbox { background: var(--sheet); border: 1px solid var(--rule); border-radius: calc(var(--radius) + 4px); padding: 22px; box-shadow: var(--shadow); } .az-template-form { display: grid; gap: 14px; position: relative; } .az-template-field { display: grid; gap: 6px; } .az-template-label { font-size: 14px; font-weight: 600; } .az-template-input { width: 100%; min-height: 46px; padding: 10px 14px; border: 1.5px solid var(--rule-strong); border-radius: 8px; background: var(--sheet); color: var(--ink); font: 400 16px/1.4 var(--f-sans); } textarea.az-template-input { min-height: 96px; resize: vertical; } .az-template-input:focus { outline: none; border-color: var(--c-main); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-main) 22%, transparent); } .az-template-input.is-invalid { border-color: var(--danger); background: var(--danger-wash); } .az-template-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; } .az-template-check input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--c-main); } .az-template-check.is-invalid { color: var(--danger); } .az-template-multi { border: 0; margin: 0; padding: 0; min-width: 0; } .az-template-multi legend { padding: 0; margin-bottom: 6px; } .az-template-multi .az-template-check { margin: 6px 0; } .az-template-textblock p + p { margin-top: 12px; } .az-template-form-msg { min-height: 1.4em; font-size: 14px; } .az-template-form-msg.is-error { color: var(--danger); } .az-template-form-done { padding: 8px 0; } .az-template-chips { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 8px; } .az-template-chips a { padding: 6px 14px; border: 1px solid var(--rule-strong); border-radius: var(--pill); color: var(--ink); text-decoration: none; font-size: 14px; } .az-template-chips a[aria-current="page"] { background: var(--c-main); border-color: var(--c-main); color: var(--c-on-main); } .az-template-postlist > li { padding: 16px 0; border-bottom: 1px solid var(--rule); } .az-template-pager { display: flex; align-items: center; gap: 18px; margin-top: 18px; } .az-template-article { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 40px; padding-top: 18px; } @media (max-width: 960px) { .az-template-article { grid-template-columns: 1fr; } } .az-template-article-head { margin-bottom: 18px; } .az-template-summary { margin: 18px 0; padding: 16px 18px; border-radius: var(--radius); background: var(--c-wash); } .az-template-prose { font-size: 17px; } .az-template-prose h2 { font-size: 24px; margin: 30px 0 10px; line-height: 1.3; } .az-template-prose h3 { font-size: 19px; margin: 22px 0 8px; } .az-template-prose p, .az-template-prose ul, .az-template-prose ol, .az-template-prose table { margin: 12px 0; } .az-template-prose ul { list-style: disc; padding-left: 22px; } .az-template-prose ol { list-style: decimal; padding-left: 22px; } .az-template-prose table { display: block; overflow-x: auto; } .az-template-prose th, .az-template-prose td { border: 1px solid var(--rule); padding: 8px 10px; } .az-template-article-side { position: sticky; top: 84px; align-self: start; display: grid; gap: 16px; } @media (max-width: 960px) { .az-template-article-side { position: static; } } .az-template-toc ol { counter-reset: toc; font-size: 14px; } .az-template-toc li { margin: 6px 0; } .az-template-toc a[aria-current="true"] { font-weight: 700; color: var(--ink); } .az-template-sidecta { padding: 16px; border-radius: var(--radius); background: var(--sheet); border: 1px solid var(--rule); } /* D1 «Dang ky ngay» (khoi register) : Goi > Quy mo > Thong tin > Thanh toan > Hoan tat */ .az-template-reg { display: grid; gap: 18px; min-width: 0; } .az-template-reg-steps { display: flex; flex-wrap: wrap; gap: 6px; counter-reset: regstep; font-size: 13.5px; } .az-template-reg-steps li { counter-increment: regstep; display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px 3px 4px; border: 1px solid var(--rule); border-radius: var(--pill); background: var(--sheet); color: var(--ink-soft); } .az-template-reg-steps li::before { content: counter(regstep); display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--rule); color: var(--ink); font: 700 12px/1 var(--f-num); } .az-template-reg-steps li.is-on { border-color: var(--c-main); color: var(--ink); } .az-template-reg-steps li.is-on::before { background: var(--c-main); color: var(--c-on-main); } .az-template-reg-steps li[aria-current="step"] { font-weight: 700; } .az-template-reg-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 24px; align-items: start; } @media (max-width: 900px) { .az-template-reg-grid { grid-template-columns: minmax(0, 1fr); } } .az-template-reg-form { display: grid; gap: 16px; min-width: 0; position: relative; } .az-template-reg-box { display: grid; gap: 12px; min-width: 0; margin: 0; padding: 18px; border: 1px solid var(--rule); border-radius: calc(var(--radius) + 4px); background: var(--sheet); } .az-template-reg-box > legend { float: left; width: 100%; margin: 0; padding: 0; } .az-template-reg-chips { display: flex; flex-wrap: wrap; gap: 8px; } .az-template-chip { position: relative; display: inline-flex; } .az-template-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } .az-template-chip span { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 14px; border: 1px solid var(--rule-strong); border-radius: var(--pill); font-size: 14px; } .az-template-chip input:checked + span { background: var(--c-main); border-color: var(--c-main); color: var(--c-on-main); } .az-template-chip input:focus-visible + span { outline: 2px solid var(--c-main); outline-offset: 2px; } .az-template-reg-plans { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 10px; } .az-template-reg-plan { position: relative; display: grid; gap: 4px; align-content: start; padding: 12px 14px 12px 42px; border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--paper); cursor: pointer; } .az-template-reg-plan input { position: absolute; left: 14px; top: 15px; width: 18px; height: 18px; margin: 0; accent-color: var(--c-main); } .az-template-reg-plan:has(input:checked) { border-color: var(--c-main); box-shadow: inset 0 0 0 1px var(--c-main); background: var(--c-wash); } .az-template-reg-plan-t { font-weight: 700; } .az-template-reg-plan-p { font-size: 14.5px; } .az-template-reg-plan-s { font-size: 13.5px; color: var(--ink-soft); } .az-template-reg-scale { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); } .az-template-reg-scale > p { grid-column: 1 / -1; } .az-template-reg-extra { display: grid; gap: 12px; } .az-template-reg-sum { position: sticky; top: 84px; display: grid; gap: 10px; min-width: 0; padding: 18px; border: 1px solid var(--rule); border-radius: calc(var(--radius) + 4px); background: var(--sheet); box-shadow: var(--shadow); } @media (max-width: 900px) { .az-template-reg-sum { position: static; } } .az-template-reg-lines { display: grid; gap: 8px; font-size: 14px; } .az-template-reg-lines li { display: flex; justify-content: space-between; gap: 12px; } .az-template-reg-lines li span:last-child { flex: none; text-align: right; } .az-template-reg-total { display: flex; justify-content: space-between; gap: 12px; padding-top: 10px; border-top: 1px solid var(--rule); font-size: 17px; } .az-template-reg-pay, .az-template-reg-done { display: grid; gap: 12px; padding: 20px; border: 1px solid var(--c-main); border-radius: calc(var(--radius) + 4px); background: var(--sheet); } .az-template-reg-done:focus { outline: 2px solid var(--c-main); outline-offset: 2px; } .az-template-reg-paygrid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: start; } @media (max-width: 640px) { .az-template-reg-paygrid { grid-template-columns: minmax(0, 1fr); justify-items: center; } } .az-template-reg-qr { padding: 10px; border-radius: var(--radius); background: #ffffff; color: #0f1e33; } .az-template-reg-qr canvas { display: block; width: 240px; max-width: 100%; height: auto; } .az-template-reg-qr.is-text { max-width: 260px; font-size: 14px; } .az-template-reg-bank { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; width: 100%; font-size: 14.5px; } .az-template-reg-bank dt { color: var(--ink-soft); } .az-template-reg-bank dd { font-weight: 600; overflow-wrap: anywhere; } .az-template-reg-paystate { font-size: 14px; } .az-template-trap { position: absolute; left: -10000px; width: 1px; height: 1px; opacity: 0; } /* 1.0 khoi html (mockup) : bieu mau that trong o cua mockup */ .az-template-formslot { min-width: 0; } .az-template-formslot .az-template-form { gap: 14px; } .az-template-formslot .az-template-form > .h3 { margin-bottom: 0; } .az-template-formslot .az-template-form-done { display: grid; gap: 8px; } .az-template-formslot .az-template-form-done[hidden] { display: none; } .az-template .toggle > [disabled] { opacity: .55; cursor: not-allowed; } .az-template a.az-template-was-btn { text-decoration: none; } /* co cham >= 44 px : dong hoi dap (mockup) */ .az-template .faq details { padding-top: 9px; padding-bottom: 9px; } .az-template .faq summary { min-height: 44px; align-items: center; } .az-template-faq summary { min-height: 44px; display: flex; align-items: center; } .az-template span.az-template-was-btn { cursor: default; } .az-template .price .btn, .az-template .pc .btn { margin-top: auto; } /* 1.0 D1 «Dang ky ngay» mo tai cho : ngan keo phai 560 px (may tinh) / tu duoi len (dien thoai) - script.js Drawer() */ html.az-template-lock { overflow: hidden; } .az-template-drawer { position: fixed; inset: 0; z-index: 80; display: flex; justify-content: flex-end; } .az-template-drawer[hidden] { display: none; } .az-template-drawer-scrim { position: absolute; inset: 0; background: color-mix(in srgb, #0f1e33 42%, transparent); opacity: 0; transition: opacity .2s ease; } .az-template-drawer-panel { position: relative; display: flex; flex-direction: column; width: min(560px, 100%); height: 100%; background: var(--sheet); border-left: 1px solid var(--rule); box-shadow: -24px 0 48px -28px rgba(15, 30, 51, .5); transform: translateX(24px); opacity: 0; transition: transform .22s ease, opacity .22s ease; } .az-template-drawer.is-open .az-template-drawer-scrim { opacity: 1; } .az-template-drawer.is-open .az-template-drawer-panel { transform: none; opacity: 1; } .az-template-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 22px; border-bottom: 1px solid var(--rule); } .az-template-drawer-head .h3 { margin: 0; } .az-template-drawer-body { flex: 1; overflow: auto; overscroll-behavior: contain; padding: 18px 22px 28px; } .az-template-drawer-wait { color: var(--ink-soft); } .az-template-drawer .az-template-reg-grid { grid-template-columns: minmax(0, 1fr); } .az-template-drawer .az-template-reg-sum { position: static; } .az-template-drawer .az-template-reg-steps { position: sticky; top: -18px; z-index: 2; margin: 0 -22px; padding: 12px 22px; background: var(--sheet); border-bottom: 1px solid var(--rule); } .az-template-drawer-lead { margin-bottom: 10px; } @media (max-width: 760px) { .az-template-drawer { align-items: flex-end; } .az-template-drawer-panel { width: 100%; height: 92vh; height: 92dvh; border-left: 0; border-radius: 20px 20px 0 0; transform: translateY(32px); } .az-template-drawer-head { padding: 14px 18px; } .az-template-drawer-body { padding: 16px 18px 24px; } .az-template-drawer .az-template-reg-steps { margin: 0 -18px; padding: 10px 18px; top: -16px; } } /* chan trang : bieu tuong «Da thong bao Bo Cong Thuong» (U29 - chi hien khi co ma nhung) */ .az-template-bct { padding-top: 12px; padding-bottom: 12px; } .az-template-bct img { display: block; height: 48px; width: auto; } } @layer az-template.pages { /* trang «sap ra mat» : dau trang gon (khong menu), nut chinh cuon toi bieu mau */ .az-template-soon .az-template-hero { padding-top: 48px; } .az-template-mt { margin-top: 28px !important; } }