/* WebTui portal — màu thương hiệu lấy từ logo lục giác (xanh dương → tím, nhấn xanh ngọc) */
:root{
  --p:#5a4ff3;--p-600:#4a3fe0;--p-ink:#fff;--p-soft:#f0efff;--p-ring:rgba(90,79,243,.2);
  --blue:#1c7cff;--violet:#8a4cf7;--teal:#06c2a6;
  --grad:linear-gradient(120deg,#1c7cff 0%,#5a4ff3 55%,#8a4cf7 100%);
  --bg:#f5f6fb;--surface:#fff;--surface-2:#f8f9fc;--text:#0f172a;--muted:#64748b;--border:#e5e8f0;--border-2:#d7dbe7;
  --ok:#0f9d6b;--warn:#c27803;--err:#dc2626;
  --radius:12px;--radius-sm:9px;--topbar:64px;
  --sh-1:0 1px 2px rgba(15,23,42,.04),0 1px 3px rgba(15,23,42,.05);
  --sh-2:0 12px 32px -14px rgba(37,30,120,.22),0 2px 6px -2px rgba(15,23,42,.06);
  --sh-3:0 24px 60px -24px rgba(37,30,120,.35)
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:14.5px;line-height:1.55;-webkit-font-smoothing:antialiased}
body{background:radial-gradient(1200px 420px at 100% -80px,rgba(138,76,247,.07),transparent 70%),radial-gradient(900px 380px at -10% -60px,rgba(28,124,255,.07),transparent 70%),var(--bg);background-repeat:no-repeat;background-attachment:fixed;display:flow-root;min-height:100vh}
a{color:var(--p);text-decoration:none;transition:color .15s}
a:hover{color:var(--p-600)}
h1,h2,h3{line-height:1.2;margin:0 0 .5em;letter-spacing:-.015em}
h1{font-size:1.85rem;font-weight:800}
h2{font-size:1.4rem;font-weight:700}
h3{font-size:1.08rem;font-weight:700}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.84em;background:var(--surface-2);border:1px solid var(--border);border-radius:5px;padding:.05em .35em}
::selection{background:var(--p-ring)}

/* ===== Topbar ===== */
.topbar{height:var(--topbar);background:rgba(255,255,255,.82);backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid rgba(229,232,240,.9);position:sticky;top:0;z-index:40}
.topbar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--grad);opacity:.85}
.topbar-inner{max-width:1600px;margin:0 auto;padding:0 1.25rem;height:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.logo{display:flex;align-items:center;gap:.6rem;color:var(--text)}
.logo:hover{color:var(--text)}
.logo-img{width:34px;height:auto;display:block;filter:drop-shadow(0 4px 8px rgba(90,79,243,.25));transition:transform .25s}
.logo:hover .logo-img{transform:rotate(-8deg) scale(1.05)}
.logo-text{display:flex;flex-direction:column;font-weight:800;font-size:1.2rem;line-height:1.05;letter-spacing:-.02em}
.logo-text b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.logo-text small{font-weight:500;color:var(--muted);font-size:.7rem;letter-spacing:0;margin-top:2px}
.topnav{display:flex;gap:.3rem;align-items:center;font-size:.9rem}
.topnav>a:not(.btn){white-space:nowrap;color:#334155;padding:.45rem .8rem;border-radius:999px;font-weight:500;transition:background .15s,color .15s}
.topnav>a:not(.btn):hover{background:var(--p-soft);color:var(--p)}
.topnav>a.active{background:var(--p-soft);color:var(--p);font-weight:600}
.user-chip{display:inline-flex;align-items:center;gap:.45rem;margin-left:.4rem;padding:.2rem .7rem .2rem .2rem;border:1px solid var(--border);border-radius:999px;background:#fff;font-size:.85rem;font-weight:500;max-width:220px}
.user-chip i{width:28px;height:28px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font-style:normal;font-weight:700;font-size:.8rem;flex:none}
.user-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inline{display:inline}
.linklike{background:none;border:0;color:var(--p);cursor:pointer;font:inherit;padding:0}

/* ===== Thành phần chung ===== */
.flash{max-width:1100px;margin:1rem auto 0;padding:.75rem 1rem .75rem 2.6rem;border-radius:var(--radius-sm);font-size:.9rem;position:relative;border:1px solid transparent;box-shadow:var(--sh-1)}
.flash::before{position:absolute;left:.9rem;top:.72rem;font-weight:800}
.flash-ok{background:#ecfdf5;color:#065f46;border-color:#a7f3d0}.flash-ok::before{content:"✓"}
.flash-err{background:#fef2f2;color:#991b1b;border-color:#fecaca}.flash-err::before{content:"!"}
.flash-info{background:#eef2ff;color:#3730a3;border-color:#c7d2fe}.flash-info::before{content:"i"}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.62rem 1.15rem;border-radius:var(--radius-sm);font-weight:600;font-size:.9rem;border:1px solid transparent;cursor:pointer;font-family:inherit;line-height:1.2;transition:transform .15s,box-shadow .2s,background .15s,border-color .15s,color .15s,filter .15s;text-align:center;white-space:nowrap;text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--grad);background-size:140% 100%;background-position:0 0;color:#fff;border-color:transparent;box-shadow:0 8px 20px -10px rgba(90,79,243,.75),inset 0 1px 0 rgba(255,255,255,.18)}
.btn-primary:hover{color:#fff;background-position:100% 0;box-shadow:0 12px 26px -10px rgba(90,79,243,.85),inset 0 1px 0 rgba(255,255,255,.18);transform:translateY(-1px)}
.btn-outline{border-color:var(--border-2);color:var(--text);background:var(--surface);box-shadow:var(--sh-1)}
.btn-outline:hover{border-color:var(--p);color:var(--p);background:#fff}
.btn-ghost{background:transparent;color:var(--muted);border-color:transparent}
.btn-ghost:hover{background:#f1f5f9;color:var(--text)}
.btn-danger{background:#fef2f2;color:#b91c1c;border-color:#fecaca}.btn-danger:hover{background:#fee2e2;color:#991b1b}
.btn-ok{background:#ecfdf5;color:#047857;border-color:#a7f3d0}.btn-ok:hover{background:#d1fae5;color:#065f46}
.btn-sm{padding:.42rem .8rem;font-size:.82rem;border-radius:8px}.btn-block{width:100%}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.input,.select,textarea.input{max-width:100%;font:inherit;padding:.58rem .75rem;border:1px solid var(--border-2);border-radius:var(--radius-sm);background:#fff;color:var(--text);width:100%;transition:border-color .15s,box-shadow .15s}
.input:hover,.select:hover{border-color:#b9bfd0}
.input:focus,.select:focus,textarea:focus{outline:0;border-color:var(--p);box-shadow:0 0 0 4px var(--p-ring)}
.select{appearance:none;-webkit-appearance:none;padding-right:2rem;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right .7rem center}
input[type=checkbox],input[type=radio]{accent-color:var(--p);width:16px;height:16px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85rem}
.field{display:grid;gap:.35rem;font-size:.85rem;font-weight:600;margin-bottom:.85rem;color:#1e293b}
.field small{font-weight:400;color:var(--muted)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.hint{font-size:.8rem;color:var(--muted);margin:.6rem 0 0}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.tag{display:inline-block;font-size:.7rem;padding:.18rem .55rem;border-radius:999px;background:var(--p-soft);color:#4338ca;font-weight:600}
.tag-demo{background:#fef3c7;color:#92400e}.tag-ok{background:#dcfce7;color:#166534}.tag-err{background:#fee2e2;color:#991b1b}.tag-muted{background:#f1f5f9;color:#475569}.tag-warn{background:#ffedd5;color:#9a3412}
.error-box{max-width:520px;margin:10vh auto;text-align:center;background:#fff;padding:2.75rem 2.25rem;border-radius:20px;border:1px solid var(--border);box-shadow:var(--sh-3)}
.error-box h1{font-size:3.4rem;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;margin:.3rem 0 .4rem}
.error-box p{color:var(--muted)}
.error-logo{width:56px;height:auto}
.empty{text-align:center;color:var(--muted);background:var(--surface-2);border:1px dashed var(--border-2);border-radius:var(--radius)}

/* ===== Builder ===== */
.builder{display:grid;grid-template-columns:minmax(0,1fr) 410px;height:calc(100vh - var(--topbar));overflow:hidden}
.preview-col{display:flex;flex-direction:column;min-width:0;background:#e8ebf3;background-image:radial-gradient(rgba(90,79,243,.09) 1px,transparent 1px);background-size:18px 18px}
.preview-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem;padding:.6rem 1rem;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
.preview-toolbar .select{width:auto;padding-top:.45rem;padding-bottom:.45rem;font-size:.86rem;font-weight:500}
.toolbar-mid{flex:1;text-align:center}
.toolbar-actions{display:flex;gap:.4rem}
.save-status{display:inline-flex;align-items:center;gap:.4rem;font-size:.78rem;font-weight:500;color:var(--muted);background:var(--surface-2);border:1px solid var(--border);padding:.22rem .7rem;border-radius:999px}
.save-status::before{content:"";width:7px;height:7px;border-radius:50%;background:#94a3b8}
.save-status.saving{color:var(--warn)}.save-status.saving::before{background:var(--warn);animation:pulse 1s infinite}
.save-status.error{color:var(--err)}.save-status.error::before{background:var(--err)}
.save-status.saved{color:var(--ok)}.save-status.saved::before{background:var(--ok)}
.preview-stage{flex:1;position:relative;overflow:auto;padding:1.1rem;display:flex;justify-content:center;align-items:flex-start}
.preview-sizer{position:relative;flex:none}
.preview-frame-wrap{position:absolute;top:0;left:0;background:#fff;box-shadow:0 30px 70px -28px rgba(30,27,75,.45),0 0 0 1px rgba(15,23,42,.06);border-radius:14px;overflow:hidden;transform-origin:top left;flex:none}
.preview-frame-wrap.device-390{border-radius:34px;border:9px solid #0f172a}
.preview-frame-wrap.device-768{border-radius:22px;border:9px solid #1e293b}
.preview-frame-wrap iframe{border:0;display:block;width:100%;height:100%;background:#fff}
.panel-col{border-left:1px solid var(--border);background:var(--surface);overflow-y:auto;min-width:0;scrollbar-width:thin;scrollbar-color:#cbd2e1 transparent}
.panel{padding:.5rem 0 5rem}
.acc{border-bottom:1px solid var(--border);margin:0 .6rem}
.acc:last-child{border-bottom:0}
.acc-head{width:100%;display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding:.85rem .5rem;background:none;border:0;border-radius:10px;cursor:pointer;font:inherit;color:inherit;text-align:left;transition:background .15s}
.acc-head:hover{background:var(--surface-2)}
.acc-head b{font-size:.93rem;display:flex;align-items:center;gap:.6rem;font-weight:600}
.acc-head::after{content:"";width:8px;height:8px;border-right:2px solid #94a3b8;border-bottom:2px solid #94a3b8;transform:rotate(45deg);margin:0 .3rem 0 .1rem;flex:none;transition:transform .2s}
.acc[data-open="1"] .acc-head::after{transform:rotate(-135deg);border-color:var(--p)}
.step{width:24px;height:24px;border-radius:8px;background:var(--p-soft);color:var(--p);display:grid;place-items:center;font-style:normal;font-size:.75rem;font-weight:700;flex:none;transition:background .2s,color .2s}
.acc[data-open="1"] .step{background:var(--grad);color:#fff;box-shadow:0 4px 10px -4px rgba(90,79,243,.7)}
.acc-sub{font-size:.76rem;color:var(--muted);text-align:right;max-width:50%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-left:auto}
.acc-body{display:none;padding:.2rem .5rem 1.1rem}
.acc[data-open="1"] .acc-body{display:block;animation:fadeIn .2s ease}
.acc[data-open="1"] .acc-head{background:transparent}
@keyframes fadeIn{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
.pills{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.8rem}
.pills button{border:1px solid var(--border);background:#fff;border-radius:999px;padding:.32rem .8rem;font:inherit;font-size:.8rem;font-weight:500;cursor:pointer;color:#334155;transition:.15s}
.pills button:hover{border-color:var(--p);color:var(--p)}
.pills button.active{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 6px 14px -8px rgba(90,79,243,.8)}
.template-grid{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.tcard{border:1.5px solid var(--border);border-radius:12px;overflow:hidden;cursor:pointer;background:#fff;text-align:left;padding:0;font:inherit;color:inherit;transition:transform .2s,box-shadow .2s,border-color .2s;position:relative}
.tcard:hover{transform:translateY(-2px);box-shadow:var(--sh-2);border-color:#c9cdf9}
.tcard.active{border-color:var(--p);box-shadow:0 0 0 3px var(--p-ring),var(--sh-2)}
.tcard.active::after{content:"✓";position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font-size:.72rem;font-weight:800;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.tcard .tthumb{aspect-ratio:4/3;background:#f1f5f9;overflow:hidden;position:relative;border-bottom:1px solid var(--border)}
.tcard .tthumb img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .5s}
.tcard:hover .tthumb img{transform:scale(1.04)}
.tcard .tswatch{position:absolute;inset:0;display:grid;grid-template-rows:38% 1fr;}
.tcard .tswatch i{display:block}
.tcard .tbody{padding:.55rem .65rem .65rem}
.tcard .tbody b{display:block;font-size:.86rem}
.tcard .tbody small{color:var(--muted);font-size:.72rem;display:block;line-height:1.35;margin-top:.1rem}
.radio-row{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.radio-col{display:grid;gap:.5rem}
.radio-card{display:flex;gap:.65rem;align-items:flex-start;border:1.5px solid var(--border);border-radius:12px;padding:.7rem .8rem;cursor:pointer;background:#fff;transition:border-color .15s,background .15s,box-shadow .15s}
.radio-card:hover{border-color:#c9cdf9}
.radio-card:has(input:checked){border-color:var(--p);background:linear-gradient(180deg,#f7f6ff,#f0efff);box-shadow:0 0 0 3px var(--p-ring)}
.radio-card input{margin-top:.2rem;flex:none}
.radio-card b{display:block;font-size:.88rem}
.radio-card small{display:block;color:var(--muted);font-size:.76rem;line-height:1.4;font-weight:400}
.price-inline{font-weight:700;color:var(--p);font-size:.85rem}
.price-inline s{color:var(--muted);font-weight:400;margin-left:.3rem}
.color-wrap{display:flex;gap:.4rem;align-items:center}
.color-wrap input[type=color]{width:44px;height:38px;padding:3px;border:1px solid var(--border-2);border-radius:var(--radius-sm);background:#fff;cursor:pointer;flex:none}
.swatches{display:flex;gap:.45rem;flex-wrap:wrap;margin:-.2rem 0 .9rem}
.swatches button{width:26px;height:26px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--border-2);cursor:pointer;transition:transform .15s}
.swatches button:hover{transform:scale(1.15)}
.seg{display:inline-flex;border:1px solid var(--border-2);border-radius:10px;overflow:hidden;background:var(--surface-2);padding:3px;gap:3px}
.seg button{border:0;background:transparent;padding:.42rem 1rem;font:inherit;font-weight:500;cursor:pointer;border-radius:7px;color:#334155}
.seg button:hover{background:#fff}
.seg button.active{background:var(--grad);color:#fff;box-shadow:0 4px 10px -6px rgba(90,79,243,.9)}
.img-row{display:flex;gap:.65rem;align-items:center;margin-bottom:.6rem;padding:.45rem;border:1px solid var(--border);border-radius:10px}
.img-row .thumb{width:64px;height:48px;object-fit:cover;border-radius:7px;background:#f1f5f9;border:1px solid var(--border);flex:none}
.img-row .meta{flex:1;min-width:0;font-size:.82rem}
.img-row .meta b{display:block}
.img-row input[type=file]{display:none}
.gallery-mini{display:grid;grid-template-columns:repeat(4,1fr);gap:.45rem}
.gallery-mini label{position:relative;cursor:pointer;aspect-ratio:1;border-radius:8px;overflow:hidden;border:1px solid var(--border);transition:box-shadow .15s}
.gallery-mini label:hover{box-shadow:0 0 0 3px var(--p-ring)}
.gallery-mini img{width:100%;height:100%;object-fit:cover}
.gallery-mini span{position:absolute;inset:auto 0 0;background:linear-gradient(transparent,rgba(15,23,42,.75));color:#fff;font-size:.65rem;text-align:center;padding:.5rem .15rem .2rem}
.gallery-mini input{display:none}
.item-card{border:1px solid var(--border);border-radius:12px;padding:.7rem;margin-bottom:.55rem;display:grid;grid-template-columns:1fr 100px;gap:.4rem .5rem;background:var(--surface-2)}
.item-card .full{grid-column:1/-1}
.item-card .row-actions{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;font-size:.75rem;color:var(--muted)}
.item-card input,.item-card textarea{font-size:.85rem;padding:.42rem .55rem}
.addon-group h4{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:1.1rem 0 .45rem;display:flex;align-items:center;gap:.5rem}
.addon-group h4::after{content:"";flex:1;height:1px;background:var(--border)}
.addon{border:1.5px solid var(--border);border-radius:12px;padding:.65rem .75rem;margin-bottom:.5rem;background:#fff;transition:border-color .15s,background .15s}
.addon:hover{border-color:#c9cdf9}
.addon.on{border-color:var(--p);background:linear-gradient(180deg,#f8f7ff,#f1f0ff)}
.addon.disabled{opacity:.55}
.addon-head{display:flex;gap:.6rem;align-items:flex-start}
.addon-head input{margin-top:.25rem}
.addon-head .aname{flex:1;font-size:.88rem;font-weight:600}
.addon-head .aprice{font-weight:700;font-size:.85rem;white-space:nowrap;color:var(--p)}
.addon-desc{font-size:.76rem;color:var(--muted);margin:.25rem 0 0 1.6rem;line-height:1.4}
.addon-meta{display:flex;flex-wrap:wrap;gap:.3rem;margin:.4rem 0 0 1.6rem}
.addon-extra{margin:.5rem 0 0 1.6rem}
.addon-extra textarea,.addon-extra select{font-size:.85rem}
.addon-reason{font-size:.75rem;color:var(--warn);margin:.3rem 0 0 1.6rem}
.quote-lines{font-size:.88rem;background:var(--surface-2);border:1px solid var(--border);border-radius:12px;padding:.35rem .9rem .6rem;margin-bottom:.75rem}
.qline{display:flex;justify-content:space-between;gap:.75rem;padding:.5rem 0;border-bottom:1px dashed var(--border-2)}
.qline .qn{flex:1}.qline .qn small{display:block;color:var(--muted);font-size:.74rem}
.qline .qa{font-weight:600;white-space:nowrap}.qline .qa s{color:var(--muted);font-weight:400;font-size:.8rem;margin-right:.3rem}
.qline.total{border-bottom:0;border-top:1.5px solid var(--text);margin-top:.3rem;padding-top:.7rem;font-size:1.02rem;align-items:center}
.qline.total .qa{font-size:1.4rem;font-weight:800;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.qnote{font-size:.78rem;padding:.55rem .75rem;border-radius:10px;margin:.5rem 0;border:1px solid transparent}
.qnote-warn{background:#fff7ed;color:#9a3412;border-color:#fed7aa}.qnote-err{background:#fef2f2;color:#991b1b;border-color:#fecaca}.qnote-info{background:#eef2ff;color:#3730a3;border-color:#c7d2fe}
#btn-checkout{padding:.8rem 1rem;font-size:.95rem}
.price-bar{display:none}

/* ===== Nút liên hệ nổi ===== */
@keyframes ring{0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,.45),0 10px 24px -10px rgba(30,27,75,.45)}60%{box-shadow:0 0 0 12px rgba(16,185,129,0),0 10px 24px -10px rgba(30,27,75,.45)}}
/* ===== Builder: chọn ngành bằng thẻ ảnh, CRM đi kèm, popup mobile ===== */
.sheet-head,.sheet-tabs,.sheet-foot,.m-dock,.sheet-backdrop{display:none}
.btn-crm{background:#0f3d38;color:#fff;border:1px solid #0f3d38}.btn-crm:hover{background:#155a52;color:#fff;border-color:#155a52}
.ind-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;margin-bottom:.6rem}
.ind-card{position:relative;display:block;aspect-ratio:5/4;border:0;padding:0;border-radius:12px;overflow:hidden;cursor:pointer;background:#1e293b;color:#fff;text-align:left;font:inherit;isolation:isolate;transition:transform .2s,box-shadow .2s}
.ind-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .5s}
.ind-card::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(15,23,42,0) 28%,rgba(15,23,42,.84) 100%)}
.ind-card>span{position:absolute;left:.55rem;right:.5rem;bottom:.45rem}
.ind-card b{display:block;font-size:.86rem;font-weight:700;line-height:1.2;text-shadow:0 1px 6px rgba(0,0,0,.4)}
.ind-card small{display:block;font-size:.66rem;opacity:.88;margin-top:1px}
.ind-card:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}.ind-card:hover img{transform:scale(1.06)}
.ind-card.active{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--p),var(--sh-2)}
.ind-card.active::before{content:"✓";position:absolute;top:6px;right:6px;width:20px;height:20px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font-size:.68rem;font-weight:800;box-shadow:0 2px 6px rgba(0,0,0,.3)}
.ind-card:focus-visible{outline:3px solid var(--p);outline-offset:3px}
.ind-info{display:flex;gap:.45rem;align-items:baseline;flex-wrap:wrap;font-size:.8rem;color:var(--muted);margin:.15rem 0 .8rem;padding:.5rem .75rem;background:var(--surface-2);border:1px solid var(--border);border-radius:10px}
.ind-info b{color:var(--text);font-weight:700}
.ind-card.ind-bio{grid-column:1/-1;aspect-ratio:auto;height:92px;background:linear-gradient(115deg,#4338ca,#7c3aed 55%,#db2777)}
.ind-bio::after{background:linear-gradient(90deg,rgba(15,23,42,.38),rgba(15,23,42,0) 62%)}
.ind-card>.ib-phones{position:absolute;left:auto;right:18px;top:12px;bottom:auto;display:flex;gap:7px;z-index:0}
.ib-phones img{position:relative;inset:auto;width:46px;height:84px;object-fit:cover;object-position:top;border-radius:9px;border:2px solid rgba(255,255,255,.9);box-shadow:0 8px 18px rgba(15,23,42,.35);z-index:auto;transition:transform .3s}
.ib-phones img:nth-child(1){transform:rotate(-9deg) translateY(9px)}.ib-phones img:nth-child(2){transform:translateY(-2px);z-index:1}.ib-phones img:nth-child(3){transform:rotate(9deg) translateY(9px)}
.ind-bio:hover .ib-phones img:nth-child(1){transform:rotate(-12deg) translate(-3px,4px)}.ind-bio:hover .ib-phones img:nth-child(2){transform:translateY(-6px)}.ind-bio:hover .ib-phones img:nth-child(3){transform:rotate(12deg) translate(3px,4px)}
.ind-bio>span:last-child{left:.95rem;right:44%;bottom:.75rem}
.ind-bio b{font-size:1rem}.ind-bio small{font-size:.72rem}
.ib-new{font-style:normal;font-size:.58rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;background:#fde047;color:#422006;border-radius:999px;padding:.12rem .42rem;margin-left:.45rem;vertical-align:2px;text-shadow:none}
.ind-bio.active::before{right:auto;left:8px}
.template-grid.is-bio{grid-template-columns:repeat(3,minmax(0,1fr))}
.bio-t .tthumb{display:block;aspect-ratio:3/4}
.bio-t-view{position:absolute;left:6px;bottom:6px;font-size:.64rem;font-weight:700;background:rgba(15,23,42,.74);color:#fff;border-radius:999px;padding:.12rem .45rem}
.bio-t{display:flex;flex-direction:column}.bio-t .tbody{flex:1;display:flex;flex-direction:column}
.bio-t .tbody .btn{width:100%;justify-content:center;margin-top:auto;padding:.32rem .4rem;font-size:.74rem}.bio-t .tbody small{margin-bottom:.5rem}
.crm-promo{margin-top:.9rem;border-radius:14px;padding:.95rem;background:radial-gradient(260px 120px at 100% 0,rgba(167,227,192,.18),transparent 70%),linear-gradient(135deg,#123f3a,#132e32);color:#e7f5ef;display:flex;flex-direction:column;gap:.75rem}
.crm-badge{display:inline-block;font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:rgba(167,227,192,.16);color:#a7e3c0;border-radius:999px;padding:.15rem .55rem;margin-bottom:.4rem}
.crm-promo b{display:block;font-size:.95rem;line-height:1.35}.crm-promo small{display:block;font-size:.76rem;color:#b8d3cb;line-height:1.55;margin-top:.2rem}
.crm-promo-actions{display:flex;gap:.45rem;flex-wrap:wrap}
.crm-promo .btn{flex:1 1 auto;justify-content:center}
.crm-promo .btn-outline{background:transparent;color:#e7f5ef;border-color:rgba(231,245,239,.35)}.crm-promo .btn-outline:hover{background:rgba(231,245,239,.08);color:#fff}
.crm-promo .btn-crm{background:#a7e3c0;color:#0f3d38;border-color:#a7e3c0}.crm-promo .btn-crm:hover{background:#c3eed5;color:#0f3d38}
.crm-promo.is-bio{background:radial-gradient(260px 120px at 100% 0,rgba(253,224,71,.16),transparent 70%),linear-gradient(135deg,#3b2a8f,#6d28d9);color:#f5f3ff}
.crm-promo.is-bio .crm-badge{background:rgba(253,224,71,.18);color:#fde047}.crm-promo.is-bio small{color:#ddd6fe}
.crm-promo.is-bio .btn-crm{background:#fde047;color:#3b0764;border-color:#fde047}.crm-promo.is-bio .btn-crm:hover{background:#fef08a;color:#3b0764}
@media (max-width:1100px){.builder{grid-template-columns:minmax(0,1fr) 360px}}
@media (max-width:860px){
  :root{--topbar:58px}
  .topbar-inner{padding:0 .75rem}
  .topnav{font-size:.82rem;gap:.1rem}
  .topnav>a:not(.btn){padding:.4rem .55rem}
  .user-name,.logo-text small{display:none}
  .user-chip{padding:.15rem;margin-left:.2rem}
  .logo-img{width:30px}
  .logo-text{font-size:1.08rem}
  h1{font-size:1.5rem}
  /* Builder mobile: website mẫu chiếm toàn màn hình, tùy chỉnh trong popup WebTui.vn */
  .builder-page .topbar{display:none}
  .builder-page .flash{position:fixed;top:8px;left:8px;right:8px;z-index:90;margin:0;box-shadow:var(--sh-2)}
  .builder{display:block;height:auto;overflow:visible}
  .preview-col{position:fixed;inset:0 0 calc(62px + env(safe-area-inset-bottom)) 0;background:#fff;background-image:none}
  .preview-toolbar{display:none}
  .preview-stage{padding:0;overflow:hidden}
  .preview-sizer{width:100%!important;height:100%!important}
  .preview-frame-wrap.device-full{position:absolute;inset:0;border:0;border-radius:0;box-shadow:none;width:100%!important;height:100%!important;transform:none!important}
  .m-dock{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;height:calc(62px + env(safe-area-inset-bottom));padding:8px 10px calc(8px + env(safe-area-inset-bottom));gap:8px;align-items:center;background:rgba(255,255,255,.97);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--border);box-shadow:0 -10px 30px -18px rgba(30,27,75,.35)}
  .dock-brand{flex:1;min-width:0;display:flex;align-items:center;gap:.55rem;border:0;background:none;padding:0 .2rem;font:inherit;color:inherit;text-align:left;cursor:pointer}
  .dock-brand img{flex-shrink:0;filter:drop-shadow(0 4px 8px rgba(90,79,243,.25))}
  .dock-brand span{min-width:0}.dock-brand b{display:block;font-size:.9rem;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dock-brand small{display:block;font-size:.74rem;color:var(--p);font-weight:700;white-space:nowrap}
  .dock-crm{flex-shrink:0;font-size:.78rem;font-weight:700;color:#0f3d38;background:#e3f3ec;border:1px solid #c7e6d8;border-radius:999px;padding:.5rem .75rem;white-space:nowrap}
  .dock-open{flex-shrink:0;padding:.62rem 1.05rem;border-radius:999px}
  .panel-col{position:fixed;left:0;right:0;bottom:0;z-index:70;height:min(88dvh,calc(100dvh - 36px));display:flex;flex-direction:column;background:var(--surface);border:0;border-radius:22px 22px 0 0;box-shadow:0 -24px 60px -20px rgba(15,23,42,.45);transform:translateY(104%);visibility:hidden;transition:transform .32s cubic-bezier(.2,.8,.2,1),visibility 0s linear .32s;overflow:hidden;padding:0}
  .builder.sheet-open .panel-col{transform:none;visibility:visible;transition:transform .32s cubic-bezier(.2,.8,.2,1),visibility 0s}
  .sheet-backdrop{display:block;position:fixed;inset:0;z-index:65;background:rgba(15,23,42,.45);opacity:0;pointer-events:none;transition:opacity .25s}
  .builder.sheet-open .sheet-backdrop{opacity:1;pointer-events:auto}
  .sheet-head{display:flex;align-items:center;gap:.6rem;padding:16px 14px 8px 16px;position:relative;flex-shrink:0;touch-action:none}
  .sheet-handle{position:absolute;top:6px;left:50%;width:42px;height:4px;margin-left:-21px;border-radius:4px;background:#d7dbe7}
  .sheet-brand{flex:1;display:flex;align-items:center;gap:.55rem;min-width:0}
  .sheet-brand>div{min-width:0}
  .sheet-brand b{display:block;font-size:1.08rem;font-weight:800;letter-spacing:-.02em;line-height:1.15}.sheet-brand b span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
  .sheet-brand small{display:block;font-size:.74rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sheet-close{flex-shrink:0;width:38px;height:38px;border-radius:50%;border:1px solid var(--border);background:#fff;font-size:1.4rem;line-height:1;cursor:pointer;color:#334155}
  .sheet-tabs{display:flex;gap:.35rem;overflow-x:auto;padding:4px 16px 10px;flex-shrink:0;scrollbar-width:none;border-bottom:1px solid var(--border)}
  .sheet-tabs::-webkit-scrollbar{display:none}
  .sheet-tabs button{flex-shrink:0;border:1px solid var(--border);background:#fff;border-radius:999px;padding:.38rem .85rem;font:inherit;font-size:.8rem;font-weight:600;color:#334155;cursor:pointer}
  .sheet-tabs button.active{background:var(--grad);border-color:transparent;color:#fff}
  .panel-col .panel{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:.2rem 0 1rem}
  .sheet-foot{display:block;flex-shrink:0;border-top:1px solid var(--border);padding:8px 16px calc(10px + env(safe-area-inset-bottom));background:#fff}
  .sheet-links{display:flex;gap:1.1rem;font-size:.78rem;font-weight:600;margin-bottom:6px}
  .sheet-total{display:flex;justify-content:space-between;align-items:center;gap:1rem}.sheet-total small{display:block;color:var(--muted);font-size:.7rem}.sheet-total b{font-size:1.15rem;font-weight:800;color:var(--p)}
  .ind-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:116px;overflow-x:auto;scroll-snap-type:x proximity;padding:6px 4px 10px;margin:0 -4px .3rem;scrollbar-width:none}
  .ind-grid::-webkit-scrollbar{display:none}
  .ind-card{scroll-snap-align:start}
  .template-grid{grid-template-columns:1fr 1fr}
  .template-grid.is-bio{grid-template-columns:1fr 1fr}
  .ind-card.ind-bio{grid-column:auto;height:auto;aspect-ratio:5/4}
  .ind-card>.ib-phones{left:0;right:0;top:7px;justify-content:center;gap:3px}
  .ib-phones img{width:23px;height:41px;border-radius:5px;border-width:1.5px}
  .ib-phones img:nth-child(1){transform:rotate(-9deg) translateY(5px)}.ib-phones img:nth-child(3){transform:rotate(9deg) translateY(5px)}
  .ind-bio>span:last-child{left:.55rem;right:.5rem;bottom:.45rem}
  .ind-bio b{font-size:.86rem}.ind-bio small{font-size:.66rem}.ib-more,.ib-new{display:none}
  .ind-bio::after{background:linear-gradient(180deg,rgba(15,23,42,0) 40%,rgba(15,23,42,.7) 100%)}
  html.sheet-lock,html.sheet-lock body{overflow:hidden}
}
@media (max-width:420px){.topnav .btn-ghost{padding:.35rem .4rem}.topnav>a:not(.btn){padding:.4rem .45rem}.topbar-inner:has(.user-chip) .logo-text{display:none}.topbar-inner{gap:.4rem}}


/* ===== Trang nội dung (checkout, customer, admin) ===== */
.page{max-width:1120px;margin:0 auto;padding:2rem 1.25rem 5rem}
.page>h1:first-child{margin-bottom:1rem}
.page-narrow{max-width:780px}
.page-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:1.25rem}
.page-head h1{margin:0}
.page-head p{margin:.3rem 0 0;color:var(--muted)}
.eyebrow{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:.35rem}
.card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:1.35rem 1.4rem;margin-bottom:1.1rem;box-shadow:var(--sh-1)}
.card h2,.card h3{margin-top:0}
.card>h3:first-child{display:flex;align-items:center;gap:.55rem;margin-bottom:.9rem}
.card>h3:first-child::before{content:"";width:4px;height:1.05em;border-radius:4px;background:var(--grad);flex:none}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.grid-2>*,.grid-3>*{min-width:0}
@media (max-width:760px){.grid-2,.grid-3{grid-template-columns:minmax(0,1fr)!important}.page{padding-top:1.25rem}}
.table{width:100%;border-collapse:separate;border-spacing:0;font-size:.88rem}
.table th,.table td{padding:.65rem .7rem;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}
.table thead th{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);background:var(--surface-2);font-weight:600;border-bottom:1px solid var(--border)}
.table thead th:first-child{border-top-left-radius:9px}.table thead th:last-child{border-top-right-radius:9px}
.table tbody tr{transition:background .12s}
.table tbody tr:hover{background:#fafaff}
.table tbody tr:last-child td{border-bottom:0}
.table tfoot td{border-top:1.5px solid var(--border-2);border-bottom:0;padding-top:.85rem}
.table td.num,.table th.num{text-align:right;white-space:nowrap}
.table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:12px}
.table-wrap .table thead th:first-child,.table-wrap .table thead th:last-child{border-radius:0}
.kv{display:grid;grid-template-columns:160px 1fr;gap:.5rem .75rem;font-size:.9rem}
.kv dt{color:var(--muted)}.kv dd{margin:0;font-weight:500}
.status{display:inline-flex;align-items:center;gap:.35rem;padding:.2rem .6rem;border-radius:999px;font-size:.74rem;font-weight:600;background:#f1f5f9;color:#334155;white-space:nowrap}
.status::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.7}
.status-ok{background:#dcfce7;color:#166534}.status-warn{background:#fef3c7;color:#92400e}.status-err{background:#fee2e2;color:#991b1b}.status-info{background:#e0e7ff;color:#3730a3}
.timeline{list-style:none;padding:0;margin:0;position:relative}
.timeline li{display:grid;grid-template-columns:30px 1fr auto;gap:.7rem;padding:.65rem 0;border-bottom:1px dashed var(--border);align-items:center;font-size:.9rem}
.timeline li:last-child{border-bottom:0}
.timeline .dot{width:24px;height:24px;border-radius:50%;background:#e2e8f0;display:grid;place-items:center;font-size:.7rem;color:#fff;font-weight:700}
.timeline li.done .dot{background:var(--ok)}.timeline li.running .dot{background:var(--p);box-shadow:0 0 0 4px var(--p-ring);animation:pulse 1s infinite}.timeline li.failed .dot{background:var(--err)}.timeline li.waiting .dot{background:var(--warn)}
@keyframes pulse{50%{opacity:.55}}
.qr-box{display:grid;grid-template-columns:260px 1fr;gap:1.5rem;align-items:start}
.qr-box img{width:100%;border:1px solid var(--border);border-radius:16px;background:#fff;padding:.4rem;box-shadow:var(--sh-2)}
.qr-label{display:block;text-align:center;font-weight:700;color:#991b1b;background:#fee2e2;border-radius:9px;padding:.42rem;margin-top:.6rem;font-size:.8rem;letter-spacing:.03em}
.copy-row{display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding:.6rem 0;border-bottom:1px dashed var(--border-2);font-size:.9rem}
.copy-row>span{color:var(--muted)}
.copy-row b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;display:inline-flex;align-items:center;gap:.4rem;flex-wrap:wrap;justify-content:flex-end;text-align:right}
@media (max-width:640px){.qr-box{grid-template-columns:1fr}.qr-box img{max-width:260px;margin:0 auto;display:block}.kv{grid-template-columns:1fr;gap:.1rem .75rem}.kv dd{margin-bottom:.45rem}}

/* ===== Admin ===== */
.admin-layout{display:grid;grid-template-columns:236px 1fr;min-height:calc(100vh - var(--topbar))}
.admin-nav{background:rgba(255,255,255,.9);border-right:1px solid var(--border);padding:1rem .7rem;position:sticky;top:var(--topbar);height:calc(100vh - var(--topbar));overflow-y:auto}
.admin-nav>div:first-child{padding:.4rem .75rem .9rem!important;margin-bottom:.4rem;border-bottom:1px solid var(--border)}
.admin-nav-title{display:flex;align-items:center;gap:.55rem;font-weight:700}
.admin-nav-title img{width:26px;height:auto}
.admin-nav-title small{display:block;font-weight:500;color:var(--muted);font-size:.72rem}
.admin-nav a{display:flex;align-items:center;gap:.6rem;padding:.55rem .75rem;border-radius:10px;color:#334155;font-size:.9rem;font-weight:500;margin-bottom:2px;transition:background .15s,color .15s}
.admin-nav a svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;opacity:.75;flex:none}
.admin-nav a:hover{background:var(--surface-2);color:var(--p)}
.admin-nav a.active{background:var(--p-soft);color:var(--p);font-weight:600;box-shadow:inset 3px 0 0 var(--p)}
.admin-nav a.active svg{opacity:1}
.admin-main{padding:1.6rem 1.9rem 5rem;min-width:0;max-width:1400px}
.admin-main>h2:first-child{font-size:1.6rem;font-weight:800;margin-bottom:1.1rem}
@media (max-width:860px){.admin-layout{grid-template-columns:minmax(0,1fr)}.admin-nav{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:.25rem;border-right:0;border-bottom:1px solid var(--border);position:sticky;top:var(--topbar);height:auto;z-index:20;padding:.5rem;scrollbar-width:none}.admin-nav>div:first-child{display:none}.admin-nav a{white-space:nowrap;margin:0;font-size:.84rem;padding:.45rem .7rem}.admin-nav a.active{box-shadow:none}.admin-main{padding:1.25rem 1rem 5rem}}
.stat-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem;margin-bottom:1.1rem}
.stat-tiles .card{margin:0;position:relative;overflow:hidden;padding:1.1rem 1.2rem;transition:transform .2s,box-shadow .2s}
.stat-tiles .card:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.stat-tiles .card::after{content:"";position:absolute;right:-26px;top:-26px;width:84px;height:84px;border-radius:50%;background:var(--c,#5a4ff3);opacity:.09}
.stat-tiles .card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--c,#5a4ff3)}
.stat-tiles .card:nth-child(4n+1){--c:#5a4ff3}.stat-tiles .card:nth-child(4n+2){--c:#06c2a6}.stat-tiles .card:nth-child(4n+3){--c:#1c7cff}.stat-tiles .card:nth-child(4n+4){--c:#8a4cf7}
.stat-tiles b{font-size:1.65rem;font-weight:800;display:block;letter-spacing:-.02em;line-height:1.25}
.stat-tiles small{color:var(--muted);font-size:.82rem}
@media (max-width:1000px){.stat-tiles{grid-template-columns:1fr 1fr}}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem 1rem}
.form-grid .full{grid-column:1/-1}
@media (max-width:640px){.form-grid{grid-template-columns:1fr}}
.mail-body{background:#fff;border:1px solid var(--border);border-radius:12px;padding:1.1rem;font-size:.9rem}
.mail-body a{word-break:break-all}
.actions{display:flex;flex-wrap:wrap;gap:.5rem}
.text-muted{color:var(--muted)}
.small{font-size:.8rem}
ul.small{padding-left:1.1rem;line-height:1.75;overflow-wrap:anywhere}

/* ===== Đăng nhập / đăng ký ===== */
.auth-box{max-width:420px;margin:6vh auto}
.auth-wrap{max-width:940px;margin:5vh auto;display:grid;grid-template-columns:1fr 1fr;background:#fff;border:1px solid var(--border);border-radius:22px;overflow:hidden;box-shadow:var(--sh-3)}
.auth-side{position:relative;padding:2.5rem 2.25rem;color:#fff;background:var(--grad);overflow:hidden;display:flex;flex-direction:column;gap:1.25rem}
.auth-side::before{content:"";position:absolute;width:340px;height:340px;right:-120px;bottom:-140px;border-radius:50%;background:rgba(255,255,255,.1)}
.auth-side::after{content:"";position:absolute;width:180px;height:180px;left:-70px;top:-70px;border-radius:50%;background:rgba(6,194,166,.35);filter:blur(10px)}
.auth-side>*{position:relative;z-index:1}
.auth-mark{width:76px;height:auto;background:#fff;border-radius:20px;padding:10px;box-shadow:0 14px 30px -12px rgba(0,0,0,.35)}
.auth-side h2{font-size:1.65rem;font-weight:800;margin:0;color:#fff}
.auth-side p{margin:0;opacity:.9}
.auth-points{list-style:none;padding:0;margin:.25rem 0 0;display:grid;gap:.65rem;font-size:.9rem}
.auth-points li{display:flex;gap:.6rem;align-items:flex-start}
.auth-points li::before{content:"✓";width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.2);display:grid;place-items:center;font-size:.72rem;font-weight:800;flex:none}
.auth-form{padding:2.5rem 2.25rem}
.auth-form h2{font-size:1.55rem;font-weight:800;margin-bottom:.25rem}
.auth-form .sub{color:var(--muted);margin:0 0 1.4rem}
.auth-form .btn-block{padding:.78rem;margin-top:.35rem;font-size:.95rem}
.auth-demo{margin-top:1.1rem;padding:.65rem .8rem;border-radius:10px;background:var(--surface-2);border:1px dashed var(--border-2)}
@media (max-width:760px){.auth-wrap{grid-template-columns:1fr;margin:1rem auto;border-radius:18px}.auth-side{padding:1.6rem 1.5rem;gap:.8rem}.auth-side .auth-points{display:none}.auth-mark{width:56px;border-radius:14px;padding:7px}.auth-form{padding:1.6rem 1.5rem}}

/* ===== Trang khách hàng ===== */
.hero-card{position:relative;overflow:hidden;border-radius:20px;padding:1.75rem 1.9rem;margin-bottom:1.25rem;background:var(--grad);color:#fff;box-shadow:var(--sh-3);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.25rem}
.hero-card::after{content:"";position:absolute;right:-60px;top:-90px;width:300px;height:300px;border-radius:50%;background:rgba(255,255,255,.1)}
.hero-card>*{position:relative;z-index:1}
.hero-card h1{color:#fff;margin:0 0 .25rem}
.hero-card p{margin:0;opacity:.9}
.hero-card .btn-outline{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.35);color:#fff;box-shadow:none}
.hero-card .btn-outline:hover{background:rgba(255,255,255,.24);color:#fff;border-color:#fff}
.hero-card .btn-white{background:#fff;color:var(--p);box-shadow:0 10px 24px -12px rgba(0,0,0,.4)}
.hero-card .btn-white:hover{color:var(--p-600);transform:translateY(-1px)}
.draft-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.7rem;list-style:none;padding:0;margin:0}
.draft-list a{display:flex;flex-direction:column;gap:.15rem;padding:.8rem .95rem;border:1px solid var(--border);border-radius:12px;background:var(--surface-2);color:var(--text);transition:border-color .15s,box-shadow .15s,transform .15s}
.draft-list a:hover{border-color:var(--p);box-shadow:var(--sh-2);transform:translateY(-1px)}
.draft-list b{color:var(--p)}
.draft-list small{color:var(--muted)}

/* Menu liên hệ (thay cụm nút nổi để không che vùng xem trước) */
.contact-menu{position:relative}
.contact-menu>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.4rem;white-space:nowrap;color:#334155;padding:.45rem .8rem;border-radius:999px;font-weight:500;transition:background .15s,color .15s;user-select:none}
.contact-menu>summary::-webkit-details-marker{display:none}
.contact-menu>summary svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.contact-menu>summary::after{content:"";width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);margin-left:.1rem;opacity:.6}
.contact-menu>summary:hover,.contact-menu[open]>summary{background:var(--p-soft);color:var(--p)}
.contact-pop{position:absolute;right:0;top:calc(100% + 8px);width:290px;background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:0 24px 48px -18px rgba(30,27,75,.35);padding:.5rem;z-index:60;animation:cpIn .16s ease-out}
.contact-menu.up .contact-pop{top:auto;bottom:calc(100% + 8px);right:-8px;max-width:calc(100vw - 24px)}
@keyframes cpIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1}}
.cp-head{padding:.45rem .6rem .55rem;border-bottom:1px solid var(--border);margin-bottom:.3rem;display:grid}
.cp-head b{font-size:.9rem}.cp-head small{color:#64748b;font-size:.75rem}
.cp-item{display:flex;align-items:center;gap:.7rem;padding:.5rem .6rem;border-radius:11px;color:#1e293b;transition:background .15s}
.cp-item:hover{background:#f5f6fb}
.cp-item>i{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;flex:none;background:var(--p-soft);color:var(--p)}
.cp-item>i svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cp-item>span{display:grid;line-height:1.25;min-width:0}.cp-item b{font-size:.86rem;font-weight:600}.cp-item small{font-size:.74rem;color:#64748b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-call>i{background:#10b981;color:#fff}.cp-zalo>i{background:#0068ff;color:#fff;font-size:.66rem;font-weight:800}.cp-msg>i{background:linear-gradient(135deg,#1c7cff,#8a4cf7);color:#fff}.cp-fb>i{background:#1877f2;color:#fff}
.sheet-links .contact-menu>summary{padding:0;color:inherit;font-weight:inherit;background:none}
.sheet-links .contact-menu>summary svg{display:none}
@media (max-width:720px){.topnav .contact-menu>summary span{display:none}.topnav .contact-menu>summary{padding:.4rem .5rem}.topnav .contact-menu>summary::after{display:none}.topnav .contact-pop{position:fixed;left:12px;right:12px;width:auto;top:calc(var(--topbar) + 6px)}}
/* Bản chạy thử sẵn sàng */
.demo-ready{display:grid;place-items:center;padding:2.5rem 1rem}
.dr-card{max-width:760px;width:100%;background:#fff;border:1px solid var(--border);border-radius:22px;padding:2rem;box-shadow:0 30px 60px -40px rgba(30,27,75,.35)}
.dr-card h1{font-size:1.6rem;margin:.6rem 0 .4rem;line-height:1.25}
.dr-badge{display:inline-block;background:var(--p-soft);color:var(--p);font-weight:700;font-size:.78rem;padding:.3rem .7rem;border-radius:999px}
.dr-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin:1.2rem 0}
.dr-box{border:1px solid var(--border);border-radius:14px;padding:.8rem 1rem;display:grid;gap:.25rem;min-width:0}
.dr-box small{color:#64748b;font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.dr-link{font-weight:600;color:var(--p);overflow-wrap:anywhere}
.dr-code{font-size:1.05rem;font-weight:700;background:#f5f6fb;border-radius:8px;padding:.35rem .6rem;cursor:copy;justify-self:start}
.dr-code.copied{background:#dcfce7;color:#166534}
.dr-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin:.4rem 0 1rem}
@media (max-width:640px){.dr-grid{grid-template-columns:1fr}.dr-card{padding:1.3rem}.dr-card h1{font-size:1.3rem}.dr-actions .btn{flex:1 1 100%;text-align:center}}
/* Checkout: chọn tên miền */
.co-grid{grid-template-columns:1.25fr 1fr;align-items:start}
.co-form h3{display:flex;align-items:center;gap:.5rem}
.co-form h3 .step,.co-form .step{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--p);color:#fff;font-size:.8rem;font-style:normal;font-weight:700}
.dm-options{display:grid;gap:.5rem;margin:.6rem 0}
.dm-opt{display:grid;grid-template-columns:auto 1fr auto;gap:.7rem;align-items:start;border:1.5px solid var(--border);border-radius:14px;padding:.75rem .9rem;cursor:pointer;transition:border-color .15s,background .15s}
.dm-opt.on{border-color:var(--p);background:var(--p-soft)}
.dm-opt.disabled{opacity:.55;cursor:not-allowed}
.dm-opt input{margin-top:.2rem;accent-color:var(--p)}
.dm-opt span{display:grid;gap:.15rem}.dm-opt b{font-size:.93rem}.dm-opt small{color:#64748b;font-size:.78rem;line-height:1.4}
.dm-price{font-style:normal;font-weight:700;color:var(--p);font-size:.85rem;white-space:nowrap}
.dm-panel{margin:.2rem 0 .6rem;padding:.8rem;border-radius:14px;background:#f8f9fc;border:1px dashed var(--border)}
.dm-input{display:flex;align-items:center;gap:.4rem}
.dm-input .input{flex:1;min-width:0}
.dm-suffix{font-weight:600;color:#475569;white-space:nowrap;font-size:.9rem}
.dm-status{margin-top:.45rem;font-size:.82rem}.dm-status .ok{color:#15803d;font-weight:600}.dm-status .err{color:#b91c1c}
.dm-status .link,.link{background:none;border:0;color:var(--p);font-weight:600;cursor:pointer;padding:0;text-decoration:underline}
.dm-tlds{display:flex;flex-wrap:wrap;gap:.35rem;margin:.55rem 0}
.dm-tlds span{font-size:.74rem;background:#fff;border:1px solid var(--border);border-radius:999px;padding:.18rem .55rem;color:#475569}.dm-tlds b{color:#0f172a}
.dm-results{display:grid;gap:.35rem}
.dm-row{display:grid;grid-template-columns:auto 1fr auto;gap:.6rem;align-items:center;background:#fff;border:1px solid var(--border);border-radius:11px;padding:.5rem .7rem;cursor:pointer}
.dm-row.taken{opacity:.6;cursor:default}.dm-row:has(input:checked){border-color:var(--p);box-shadow:0 0 0 2px var(--p-soft)}
.dm-name{font-weight:600;overflow-wrap:anywhere}.dm-name .tag{font-size:.65rem}
.dm-cost{display:grid;text-align:right}.dm-cost small{color:#64748b;font-size:.7rem}
.dm-taken{color:#b91c1c;font-size:.8rem;font-weight:600}
.dm-loading{font-size:.85rem;color:#64748b}
.co-total{display:flex;justify-content:space-between;align-items:baseline;margin:.3rem 0 .8rem;padding-top:.7rem;border-top:1px solid var(--border)}
.co-total b{font-size:1.35rem;color:var(--p)}
.row-discount td{color:#15803d}
.qnote-info{background:#eef2ff;color:#3730a3}
.mt-16{margin-top:1rem}
@media (max-width:860px){.co-grid{grid-template-columns:1fr}.co-form{order:-1}}
.dm-results .dm-more{display:none}.dm-results.show-all .dm-more{display:grid}.dm-more-btn{justify-self:start;font-size:.85rem;margin:.2rem 0}
/* Topping v2: gợi ý, combo, số lượng, tự thêm */
.addon-rec,.addon-bundles{margin:.2rem 0 .8rem}
.addon-rec h4,.addon-bundles h4{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--p);margin:.4rem 0 .45rem}
.rec-card{display:flex;justify-content:space-between;gap:.6rem;align-items:center;background:linear-gradient(135deg,var(--p-soft),#fff);border:1px solid rgba(90,79,243,.25);border-radius:12px;padding:.6rem .75rem;margin-bottom:.4rem}
.rec-card>div:first-child{display:grid;gap:.1rem;min-width:0}.rec-card b{font-size:.88rem}.rec-card small{font-size:.74rem;color:#475569;line-height:1.35}
.rec-side{display:grid;justify-items:end;gap:.25rem;flex:none}.rec-side span{font-size:.75rem;font-weight:600;color:#334155;white-space:nowrap}
.btn-xs{padding:.25rem .65rem;font-size:.75rem;border-radius:999px}
.addon-bundles{display:grid;gap:.45rem}
.bundle-card{border:1.5px dashed #c7d2fe;border-radius:12px;padding:.65rem .75rem;display:grid;gap:.3rem;background:#fff}
.bundle-card.active{border-style:solid;border-color:#86efac;background:#f0fdf4}
.bundle-top{display:flex;justify-content:space-between;align-items:center;gap:.5rem}.bundle-top b{font-size:.88rem}
.bundle-off{background:#dc2626;color:#fff;font-weight:800;font-size:.72rem;border-radius:999px;padding:.12rem .5rem}
.bundle-card small{color:#64748b;font-size:.75rem;line-height:1.35}
.bundle-items{display:flex;flex-wrap:wrap;gap:.25rem}.bundle-items span{font-size:.7rem;background:#f1f5f9;border-radius:999px;padding:.12rem .45rem;color:#334155}
.bundle-card .btn{justify-self:start}.bundle-state{font-size:.75rem;color:#15803d;font-weight:600}
.tag-badge{background:#fef3c7;color:#92400e}.tag-auto{background:#e0e7ff;color:#3730a3}
.tag-link{border:0;cursor:pointer;background:var(--p-soft);color:var(--p);font-weight:600}
.addon.auto{border-style:dashed;border-color:#a5b4fc;background:#f8f9ff}
.addon-reason{margin-left:1.6rem}
.addon.auto .addon-reason{color:#4338ca}
.addon-qty{display:inline-flex;align-items:center;gap:.4rem;margin:.45rem 0 0 1.6rem;background:#f1f5f9;border-radius:999px;padding:.15rem}
.addon-qty button{width:26px;height:26px;border-radius:50%;border:0;background:#fff;font-weight:700;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.addon-qty b{min-width:1.4rem;text-align:center}.addon-qty span{font-size:.75rem;color:#475569;margin-right:.3rem}
.qnote-tip{background:#fefce8;color:#854d0e;border-color:#fde68a}
/* Trang BIO: thư viện mẫu */
.bio-land{max-width:1200px;margin:0 auto;padding:1.5rem 1rem 3rem}
.bl-hero{display:grid;grid-template-columns:1.15fr .85fr;gap:2rem;align-items:center;padding:1rem 0 2rem}
.bl-eyebrow{display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.04em;color:var(--p);background:var(--p-soft);padding:.3rem .7rem;border-radius:999px}
.bl-hero h1{font-size:clamp(1.8rem,4.4vw,2.9rem);line-height:1.15;margin:.8rem 0}
.bl-hero p{color:#475569;font-size:1.02rem}
.bl-points{margin:1rem 0;padding:0;list-style:none;display:grid;gap:.45rem}.bl-points li{padding-left:1.6rem;position:relative;color:#334155}.bl-points li::before{content:"✓";position:absolute;left:0;color:#16a34a;font-weight:800}
.bl-price{margin-top:.8rem}.bl-price b{color:var(--p)}
.bl-phone{justify-self:center;width:300px;height:600px;border-radius:40px;padding:10px;background:#0f172a;box-shadow:0 40px 80px -40px rgba(30,27,75,.6)}
.bl-phone iframe{width:390px;height:780px;border:0;border-radius:32px;transform:scale(.7179);transform-origin:0 0;background:#fff;pointer-events:none}
.bl-mine{margin:1rem 0 2rem}.bl-mine h2,.bl-grid-wrap h2{font-size:1.35rem;margin-bottom:.9rem}
.bl-mine-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:.7rem}
.bl-mine-card{display:grid;gap:.2rem;padding:1rem 1.1rem;border:1px solid var(--border);border-radius:16px;background:#fff}.bl-mine-card small{color:#64748b}.bl-mine-card span{color:var(--p);font-weight:700;font-size:.85rem}
.bl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:1.1rem}
.bl-card{background:#fff;border:1px solid var(--border);border-radius:20px;overflow:hidden;display:flex;flex-direction:column}
.bl-shot{display:block;aspect-ratio:390/560;overflow:hidden;background:linear-gradient(145deg,var(--p),var(--a));position:relative}
.bl-shot img{width:100%;height:auto;transition:transform 4s ease}.bl-card:hover .bl-shot img{transform:translateY(-22%)}
.bl-shot span{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-weight:800;font-size:1.3rem}
.bl-body{padding:1rem 1.1rem 1.2rem;display:flex;flex-direction:column;gap:.45rem;flex:1}
.bl-cat{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--p)}
.bl-body h3{font-size:1.08rem}.bl-body p{color:#64748b;font-size:.86rem;flex:1}
.bl-pal{display:flex;gap:.35rem}.bl-pal i{width:20px;height:20px;border-radius:50%;box-shadow:0 0 0 2px #fff,0 0 0 3px var(--border)}
.bl-act{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.3rem}
@media (max-width:860px){.bl-hero{grid-template-columns:1fr}.bl-phone{display:none}}
/* Trình sửa trang BIO */
.be{max-width:1240px;margin:0 auto;padding:1rem 1rem 3rem}
.be-top{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;padding:.4rem 0 1rem}
.be-back{font-weight:600;font-size:.88rem}
.be-title{flex:1;min-width:0;display:grid}.be-title b{font-size:1.15rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.be-title small{color:var(--muted);font-size:.8rem}
.be-tabs{display:none}
.be-grid{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:1.5rem;align-items:start}
.be-panel{display:grid;gap:.8rem;min-width:0}
.be-sec{background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:var(--sh-1)}
.be-sec>summary{cursor:pointer;list-style:none;padding:.95rem 1.1rem;font-weight:700;display:flex;justify-content:space-between;align-items:center}
.be-sec>summary::-webkit-details-marker{display:none}
.be-sec>summary::after{content:"";width:8px;height:8px;border:solid var(--muted);border-width:0 2px 2px 0;transform:rotate(45deg);transition:transform .2s}
.be-sec[open]>summary::after{transform:rotate(-135deg)}
.be-body{padding:0 1.1rem 1.1rem}
.be-sub{font-weight:700;font-size:.85rem;margin:.4rem 0 .6rem}
.be-check{display:flex;gap:.5rem;align-items:center;font-size:.86rem;margin:.1rem 0 .8rem;cursor:pointer}
.be-check input{width:18px;height:18px;accent-color:var(--p)}
.be-tpls{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.45rem;margin-bottom:1rem}
.be-tpls button{display:flex;align-items:center;gap:.5rem;text-align:left;padding:.5rem .6rem;border:1px solid var(--border-2);border-radius:10px;background:#fff;font:inherit;font-size:.82rem;font-weight:600;cursor:pointer;color:var(--text)}
.be-tpls button i{width:22px;height:22px;border-radius:7px;flex:none}
.be-tpls button.on{border-color:var(--p);box-shadow:0 0 0 3px var(--p-ring);color:var(--p)}
.be-pals{display:flex;gap:.55rem;flex-wrap:wrap}
.be-pals button{width:40px;height:40px;border-radius:50%;border:0;padding:0;cursor:pointer;background:conic-gradient(var(--a) 0 50%,var(--b) 50% 80%,var(--c) 80%);box-shadow:0 0 0 2px #fff,0 0 0 3px var(--border-2)}
.be-pals button.on{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--p)}
.be-color{display:flex;gap:.4rem;align-items:center}.be-color input{width:52px;height:38px;border:1px solid var(--border-2);border-radius:9px;padding:3px;background:#fff;cursor:pointer}
.be-imgpair{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.be-img{display:flex;gap:.6rem;align-items:center;min-width:0}
.be-img img,.be-noimg{width:64px;height:64px;border-radius:12px;object-fit:cover;flex:none;background:var(--surface-2);border:1px dashed var(--border-2)}
.be-noimg{display:grid;place-items:center;font-size:.66rem;color:var(--muted);font-style:normal;text-align:center;line-height:1.2;padding:4px}
.be-img-act{display:flex;flex-wrap:wrap;gap:.3rem}
.be-img input[type=file],.be-add-img input[type=file]{position:absolute;width:1px;height:1px;opacity:0}
.be-img label.btn{position:relative;overflow:hidden;cursor:pointer}
.be-imgs{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:.45rem}
.be-imgs figure{margin:0;position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--surface-2)}
.be-imgs img{width:100%;height:100%;object-fit:cover}
.be-x{position:absolute;top:4px;right:4px;width:24px;height:24px;border-radius:50%;border:0;background:rgba(15,23,42,.72);color:#fff;cursor:pointer;font-size:1rem;line-height:1}
.be-add-img{position:relative;display:grid;place-items:center;aspect-ratio:1;border:1.5px dashed var(--border-2);border-radius:10px;color:var(--p);font-size:.78rem;font-weight:600;cursor:pointer;text-align:center}
.be-chips{display:flex;flex-wrap:wrap;gap:.45rem}
.be-chips button{display:inline-flex;align-items:center;gap:.35rem;padding:.45rem .8rem;border-radius:999px;border:1px solid var(--border-2);background:#fff;font:inherit;font-size:.84rem;cursor:pointer;color:var(--text)}
.be-chips button.on{background:var(--p-soft);border-color:var(--p);color:var(--p);font-weight:600}
.be-chips button b{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--p);color:#fff;font-size:.7rem}
.be-blocks{display:grid;gap:.5rem;margin-bottom:.7rem}
.be-block{border:1px solid var(--border);border-radius:12px;background:var(--surface-2)}
.be-block.open{background:#fff;border-color:var(--border-2);box-shadow:var(--sh-2)}
.be-block.is-hidden .be-block-toggle{opacity:.5}
.be-block-head{display:flex;align-items:center;gap:.3rem;padding:.3rem .4rem .3rem .2rem}
.be-block-toggle{flex:1;min-width:0;display:grid;text-align:left;background:none;border:0;padding:.35rem .6rem;cursor:pointer;font:inherit;color:var(--text)}
.be-block-toggle small{font-size:.7rem;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.be-block-toggle b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.92rem}
.be-block-tools,.be-item-head span{display:flex;gap:2px;flex:none}
.be-block-tools button,.be-item-head button{width:32px;height:32px;border-radius:8px;border:0;background:transparent;color:#475569;cursor:pointer;font-size:.95rem}
.be-block-tools button:hover:not(:disabled),.be-item-head button:hover:not(:disabled){background:var(--p-soft);color:var(--p)}
.be-block-tools button:disabled,.be-item-head button:disabled{opacity:.3;cursor:default}
.be-block-body{padding:.4rem 1rem 1rem;border-top:1px solid var(--border)}
.be-items{display:grid;gap:.5rem;margin-bottom:.6rem}
.be-item{border:1px solid var(--border);border-radius:10px;padding:.2rem .7rem .3rem;background:var(--surface-2)}
.be-item-head{display:flex;justify-content:space-between;align-items:center;gap:.4rem}
.be-item-head b{font-size:.84rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.be-items.inline .be-item-body{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.be-item .field{margin-bottom:.55rem}
.be-addblock>summary{list-style:none;cursor:pointer}.be-addblock>summary::-webkit-details-marker{display:none}
.be-addgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.4rem;margin-top:.6rem}
.be-addgrid button{padding:.6rem .7rem;border:1px solid var(--border);border-radius:10px;background:#fff;font:inherit;font-size:.83rem;text-align:left;cursor:pointer;color:var(--text)}
.be-addgrid button:hover{border-color:var(--p);color:var(--p)}
.be-slug{display:flex;align-items:stretch;border:1px solid var(--border-2);border-radius:var(--radius-sm);overflow:hidden;background:#fff}
.be-slug span{padding:.58rem .1rem .58rem .7rem;color:var(--muted);font-weight:500;white-space:nowrap;background:var(--surface-2)}
.be-slug .input{border:0;border-radius:0;min-width:0;padding-left:.2rem;box-shadow:none!important}
#be-slug-status.ok{color:var(--ok)}#be-slug-status.err{color:var(--err)}
.be-kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:.5rem;margin-bottom:.8rem}
.be-kpi div{background:var(--surface-2);border-radius:10px;padding:.6rem .7rem;display:grid}.be-kpi b{font-size:1.25rem}.be-kpi span{font-size:.75rem;color:var(--muted)}
.be-spark{display:flex;align-items:flex-end;gap:2px;height:64px;margin-bottom:.8rem}.be-spark i{flex:1;background:var(--p);opacity:.75;border-radius:2px 2px 0 0;min-height:2px}
.be-top-list,.be-leads{list-style:none;margin:0;padding:0;display:grid;gap:.35rem;font-size:.85rem}
.be-top-list li{display:flex;justify-content:space-between;gap:.5rem;border-bottom:1px dashed var(--border);padding:.25rem 0}
.be-leads li{padding:.55rem .7rem;border:1px solid var(--border);border-radius:10px}.be-leads small{float:right;color:var(--muted)}.be-leads p{margin:.3rem 0 0;color:#475569}
.be-preview{position:sticky;top:calc(var(--topbar) + 12px)}
.be-phone{position:relative;width:400px;height:min(800px,calc(100vh - var(--topbar) - 40px));border-radius:38px;padding:10px;background:#0f172a;box-shadow:0 40px 80px -40px rgba(30,27,75,.6);overflow:hidden}
.be-phone iframe{position:absolute;inset:10px;width:calc(100% - 20px);height:calc(100% - 20px);border:0;border-radius:30px;background:#fff}
.be-phone iframe.next{visibility:hidden}
@media (max-width:1100px){.be-grid{grid-template-columns:minmax(0,1fr) 340px}.be-phone{width:340px}}
@media (max-width:900px){
  .be{padding:.6rem .75rem 5rem}
  .be-top{gap:.45rem}.be-top .btn-outline{display:none}.be-title{flex-basis:calc(100% - 7rem);order:-1}.be-back{order:-2;flex-basis:100%}
  .be-tabs{display:grid;grid-template-columns:1fr 1fr;position:sticky;top:var(--topbar);z-index:20;background:var(--bg);padding:.3rem 0 .6rem;gap:.4rem}
  .be-tabs button{padding:.55rem;border-radius:10px;border:1px solid var(--border-2);background:#fff;font:inherit;font-weight:600;cursor:pointer;color:var(--text)}
  .be-tabs button.on{background:var(--p);border-color:var(--p);color:#fff}
  .be-grid{grid-template-columns:1fr}
  .be-grid .be-preview{display:none}
  .be-grid[data-view=preview] .be-panel{display:none}
  .be-grid[data-view=preview] .be-preview{display:block;position:static}
  .be-phone{width:100%;max-width:430px;margin:0 auto;height:calc(100vh - var(--topbar) - 120px);border-radius:28px;padding:6px}
  .be-phone iframe{inset:6px;width:calc(100% - 12px);height:calc(100% - 12px);border-radius:23px}
}
@media (max-width:560px){.be-imgpair,.be-items.inline .be-item-body{grid-template-columns:1fr}.be-body{padding:0 .85rem .9rem}.be-sec>summary{padding:.85rem}.be-block-body{padding:.4rem .7rem .8rem}.be-block-tools button{width:30px}}
@media (max-width:560px){.topnav .nav-x{display:none}}@media (max-width:480px){.topbar-inner .logo-text{display:none}}
.be-warn{background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;border-radius:10px;padding:.6rem .8rem;font-size:.84rem;margin-bottom:.8rem}

/* ===== v5: thanh công cụ trang đặt web (đoạn này chỉ thêm kiểu cho phần tử mới, không đổi display của khối có media query ở trên) ===== */
.dev-seg{display:inline-flex;gap:2px;padding:3px;border-radius:12px;background:#eef0f7;border:1px solid var(--border)}
.dev-seg button{display:inline-flex;align-items:center;gap:.4rem;height:32px;padding:0 .75rem;border:0;border-radius:9px;background:transparent;color:#5b6478;font:500 .82rem/1 inherit;cursor:pointer;transition:background .15s,color .15s,box-shadow .15s}
.dev-seg button svg{width:17px;height:17px}
.dev-seg button:hover{color:var(--text)}
.dev-seg button.on{background:#fff;color:var(--p);box-shadow:0 1px 3px rgba(15,23,42,.12)}
@media (max-width:1180px){.dev-seg button span{display:none}.dev-seg button{padding:0 .6rem}}
.tb-icon{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:10px;border:1px solid var(--border);background:#fff;color:#475069;cursor:pointer;transition:all .15s}
.tb-icon svg{width:17px;height:17px}
.tb-icon:hover{color:var(--p);border-color:#c9c6f7;background:var(--p-soft)}
.toolbar-actions{align-items:center}
.toolbar-actions .btn-crm{display:inline-flex;align-items:center;gap:.4rem;height:36px;border-radius:10px}
.toolbar-actions .btn-crm svg{width:15px;height:15px}
.preview-stage{background-color:#eef0f6;background-image:radial-gradient(rgba(15,23,42,.07) 1px,transparent 1.2px);background-size:18px 18px}
.co-shot{position:relative;display:block;margin:.25rem 0 1rem;border-radius:12px;overflow:hidden;border:1px solid var(--border);background:var(--surface-2)}
.co-shot img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:top;transition:transform .8s}
.co-shot:hover img{transform:scale(1.03)}
.co-shot span{position:absolute;right:10px;top:10px;background:rgba(15,23,42,.75);color:#fff;font-size:.75rem;font-weight:600;padding:.25rem .6rem;border-radius:999px}
/* Trang BIO — thông báo, tài khoản phụ, trang quản trị riêng */
.be-more{border:1px solid var(--border);border-radius:12px;padding:.2rem .9rem;margin:.2rem 0 1rem;background:var(--surface-2)}
.be-more>summary{cursor:pointer;font-weight:600;font-size:.88rem;padding:.6rem 0;display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.be-more[open]{padding-bottom:.8rem}
.be-row3{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,.7fr) minmax(0,1fr);gap:.75rem}
.be-row-btn{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.6rem;align-items:end}.be-row-btn .field{margin-bottom:0}.be-row-btn .btn{height:42px}
.be-steps{margin:.2rem 0 .9rem;padding-left:1.2rem;font-size:.84rem;color:#475569;display:grid;gap:.25rem}.be-steps code{background:var(--surface-2);padding:.05rem .35rem;border-radius:6px}
.be-chats{display:grid;gap:.4rem;margin:.7rem 0}
.be-chat{display:grid;text-align:left;padding:.55rem .8rem;border:1px solid var(--border-2);border-radius:10px;background:#fff;cursor:pointer;font:inherit;color:var(--text)}
.be-chat small{color:var(--muted);font-size:.75rem}.be-chat.on{border-color:var(--p);box-shadow:0 0 0 3px var(--p-ring)}
.be-err{color:#b91c1c;font-size:.84rem;margin:.4rem 0}.be-ok{color:#15803d;font-size:.84rem;margin:.4rem 0}
.be-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border)}
.be-url{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:.4rem 0 1rem}.be-url .code-chip{word-break:break-all}
.be-logins{display:grid;gap:.5rem;margin-bottom:1rem}
.be-login{border:1px solid var(--border);border-radius:12px;padding:.7rem .8rem;display:grid;gap:.5rem}
.be-login-main small{display:block;color:var(--muted);font-size:.78rem;margin-top:.2rem}
.be-login-act{display:flex;flex-wrap:wrap;gap:.3rem;align-items:center}.be-login-act .select{width:auto;min-width:0;height:34px;font-size:.8rem;padding:0 1.8rem 0 .6rem}
.be-danger{color:#b91c1c}
.be-newlogin{border-top:1px solid var(--border);padding-top:.8rem}
.code-chip[data-copy]{cursor:copy}.code-chip.copied{background:#dcfce7;color:#166534}
.be-standalone .be-top{padding-top:.2rem}
@media (max-width:640px){.be-row3,.be-newlogin .field-row,.be-notify .field-row{grid-template-columns:1fr}.be-actions .btn{flex:1 1 100%}}
/* Layout trang quản trị riêng */
.bio-admin-bar{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.bio-admin-bar-in{max-width:1280px;margin:0 auto;padding:.6rem 16px;display:flex;align-items:center;gap:.75rem}
.bio-admin-brand{display:flex;align-items:center;gap:.55rem;min-width:0;flex:1;color:inherit;text-decoration:none}
.bio-admin-brand i{width:34px;height:34px;border-radius:10px;background:var(--p);color:#fff;display:grid;place-items:center;font-style:normal;font-weight:800;flex:none;overflow:hidden}
.bio-admin-brand i img{width:100%;height:100%;object-fit:cover}
.bio-admin-brand span{display:grid;min-width:0}.bio-admin-brand b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bio-admin-brand small{color:var(--muted);font-size:.74rem}
.bio-admin-who{font-size:.8rem;color:var(--muted);white-space:nowrap}
.bio-admin-page{--topbar:56px}
@media (max-width:640px){.bio-admin-who{display:none}}
/* Thư viện mẫu BIO trên điện thoại: lưới 2 cột gọn, ảnh xem trước phần đầu trang */
.bl-shot img{object-fit:cover;object-position:top}
@media (max-width:620px){
  .bl-hero{padding-top:.4rem}
  .bl-hero h1{font-size:1.7rem}
  .bl-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}
  .bl-card{border-radius:16px}
  .bl-shot{aspect-ratio:3/4}
  .bl-body{padding:.7rem .75rem .85rem;gap:.3rem}
  .bl-body h3{font-size:.92rem;line-height:1.3}
  .bl-body p,.bl-pal{display:none}
  .bl-cat{font-size:.64rem}
  .bl-act{display:grid;gap:.35rem;margin-top:.2rem}.bl-act form,.bl-act .btn{width:100%}.bl-act .btn{justify-content:center;padding:.5rem .4rem;font-size:.78rem}
  .bl-mine-list{grid-template-columns:1fr}
}
/* Footer chung cổng WebTui (layouts/_footer.php) */
.wt-foot{--fb:#f6f7fb;--fl:#e5e8f0;--ft:#0f172a;--fm:#5b6476;background:var(--fb);color:var(--fm);border-top:1px solid var(--fl);margin-top:48px;font-size:.92rem}
.wt-foot.is-dark{--fb:#0b0d17;--fl:rgba(255,255,255,.1);--ft:#fff;--fm:#a3a9c2;margin-top:0;border-top:0}
.wt-foot-in{max-width:1200px;margin:0 auto;padding:56px 16px 26px}
.wt-foot-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:32px}
.wt-foot-logo{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:1.25rem;color:var(--ft);text-decoration:none}.wt-foot-logo b{color:#6366f1}
.wt-foot-brand p{margin:14px 0 18px;line-height:1.65;max-width:30em}
.wt-foot-cta{display:flex;gap:8px;flex-wrap:wrap}
.wt-foot-btn{display:inline-flex;align-items:center;height:40px;padding:0 16px;border-radius:999px;background:linear-gradient(135deg,#4f46e5,#7c3aed);color:#fff!important;font-weight:700;font-size:.88rem;text-decoration:none;box-shadow:0 10px 22px -12px #4f46e5}
.wt-foot-btn.is-ghost{background:transparent;color:var(--ft)!important;border:1px solid var(--fl);box-shadow:none}
.wt-foot-col{display:flex;flex-direction:column;gap:9px;min-width:0}
.wt-foot-col h4{margin:0 0 6px;color:var(--ft);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase}
.wt-foot-col a{color:var(--fm);text-decoration:none;transition:color .2s;overflow-wrap:anywhere}.wt-foot-col a:hover{color:var(--ft)}
.wt-foot-ic{display:inline-flex;align-items:center;gap:8px}.wt-foot-ic svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none;color:#6366f1}
.wt-foot-social{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.wt-foot-social a{padding:.32rem .75rem;border-radius:999px;border:1px solid var(--fl);font-size:.8rem;font-weight:600}
.wt-foot-bottom{display:flex;justify-content:space-between;gap:10px 24px;flex-wrap:wrap;margin-top:40px;padding-top:20px;border-top:1px solid var(--fl);font-size:.82rem}
@media (max-width:900px){.wt-foot-top{grid-template-columns:1fr 1fr}.wt-foot-brand{grid-column:1/-1}}
@media (max-width:520px){.wt-foot-in{padding:40px 16px 22px}.wt-foot-top{gap:26px 18px}.wt-foot-col{font-size:.88rem}.wt-foot-bottom{flex-direction:column;margin-top:28px}}