/* ==========================================================
   Opend – tối giản, tinh tế (theo prototype Opend)
   ========================================================== */
:root{
  --ink:#191b1f;--txt:#3f3f46;--mute:#646973;--soft:#8a909b;--tone:#636e7e;
  --line:#e3e5e9;--line2:#ececef;--bg:#fcfcfc;--bg2:#f4f5f7;--bg3:#eceef1;--dark:#151619;--white:#fff;
  --acc:#f97316;--acc-50:#fff7ed;
  --ok:#16a34a;--warn:#d97706;--err:#dc2626;
  --font:'Instrument Sans','Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',sans-serif;
  --r:8px;
  --shadow:0 1px 2px rgba(24,24,27,.05),0 12px 36px -8px rgba(24,24,27,.18),0 0 0 1px rgba(24,24,27,.05);
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--font);background:var(--bg);color:var(--txt);font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,p{margin:0}
img{max-width:100%;display:block}
.ic{flex:none;display:block}
[hidden]{display:none!important}
.wrap{max-width:1280px;margin:0 auto;padding:0 40px}
.mono{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.muted{color:var(--mute)}
.op-word b{font-weight:inherit;color:var(--soft)}

/* ---------- Nút ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:40px;padding:0 18px;border-radius:99px;border:1px solid transparent;background:var(--bg2);color:var(--ink);font-weight:500;font-size:14px;cursor:pointer;white-space:nowrap;transition:background .2s,border-color .2s,color .2s,opacity .2s}
.btn:hover{background:var(--line)}
.btn.primary{background:var(--dark);color:#fff}
.btn.primary:hover{background:#2a2c31}
.btn.outline{background:#fff;border-color:var(--line)}
.btn.outline:hover{border-color:var(--ink)}
.btn.ghost{background:transparent}
.btn.ghost:hover{background:var(--bg2)}
.btn.light{background:#f4f5f6;color:var(--dark)}
.btn.lg{height:48px;padding:0 26px;font-size:15px}
.btn.sm{height:32px;padding:0 14px;font-size:13px}
.btn.block{width:100%}
.btn:disabled,.btn.is-busy{opacity:.5;cursor:not-allowed;pointer-events:none}
.btn .arr{font-size:13px;transition:transform .25s}
.btn:hover .arr{transform:translate(2px,-2px)}
.link{border-bottom:1px solid currentColor;padding-bottom:1px;cursor:pointer}
.link:hover{opacity:.6}

/* ---------- Trạng thái ---------- */
.badge{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--mute);white-space:nowrap}
.badge::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--soft)}
.badge.ok::before{background:var(--ok)}.badge.warn::before{background:var(--warn)}.badge.err::before{background:var(--err)}
.badge.ok{color:#15803d}.badge.warn{color:#b45309}.badge.err{color:#b91c1c}

/* ---------- Form ---------- */
.f{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.f>span{font-size:13px;font-weight:500;color:var(--ink)}
.f small{font-size:12px;color:var(--mute)}
.in{height:44px;border:1px solid var(--line);border-radius:var(--r);padding:0 14px;background:#fff;outline:none;width:100%;transition:border-color .15s,box-shadow .15s}
.in:focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(25,27,31,.07)}
.f.bad .in{border-color:var(--err)}
.f .err-tx{color:var(--err);font-size:12.5px}
.in-group{display:flex;align-items:stretch;border:1px solid var(--line);border-radius:var(--r);background:#fff;overflow:hidden;transition:border-color .15s,box-shadow .15s}
.in-group:focus-within{border-color:var(--ink);box-shadow:0 0 0 3px rgba(25,27,31,.07)}
.in-group .in{border:0;box-shadow:none;border-radius:0}
.in-group em{font-style:normal;display:flex;align-items:center;padding:0 14px;background:var(--bg2);color:var(--mute);font-size:13px;white-space:nowrap;border-left:1px solid var(--line)}
.f-2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.alert{padding:12px 14px;border-radius:var(--r);font-size:13.5px;margin-bottom:16px;display:flex;gap:10px;align-items:flex-start}
.alert.err{background:#fef2f2;color:#991b1b}
.alert.ok{background:#f0fdf4;color:#166534}
.alert.warn{background:#fffbeb;color:#92400e}
.alert.info{background:var(--bg2);color:var(--txt)}

/* ==========================================================
   Trang công khai
   ========================================================== */
.pub{background:#fff;color:var(--ink);min-height:100vh;display:flex;flex-direction:column}
.pub main{flex:1}
.nav{position:sticky;top:0;z-index:50;background:rgba(239,240,243,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(25,27,31,.07)}
.nav-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:72px}
.logo{justify-self:start;display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:20px;letter-spacing:-.03em;color:var(--ink)}
.nav nav{display:flex;gap:34px}
.nav nav a{font-size:13.5px;font-weight:600;position:relative}
.nav nav a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.nav nav a:hover::after,.nav nav a.on::after{transform:scaleX(1)}
.nav-r{justify-self:end;display:flex;align-items:center;gap:22px}
.nav-r .mono-link{font-size:11px;letter-spacing:.08em;color:var(--ink)}
.nav-r .mono-link:hover{opacity:.55}
.nav-burger{display:none;background:none;border:0;cursor:pointer;padding:6px}

/* Hero */
.hero{background:linear-gradient(180deg,#eceef1 0%,#e4e6ea 60%,#dfe2e6 100%);margin-top:-73px;padding-top:73px;overflow:hidden}
.hero-in{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:56px;align-items:center;min-height:min(820px,calc(100vh - 20px));padding-top:40px;padding-bottom:60px}
.kicker{display:flex;align-items:center;gap:12px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);margin-bottom:30px}
.kicker i{width:6px;height:6px;background:currentColor}
.hero h1{font-weight:500;font-size:clamp(40px,5.2vw,74px);line-height:1.04;letter-spacing:-.05em;margin-bottom:30px}
.hero h1 span,.sec-head h2 span,.final h2 span,.page-head h1 span{color:var(--tone)}
.hero p{font-size:15.5px;line-height:1.75;color:var(--mute);max-width:430px;margin-bottom:38px}
.cta{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.play{width:28px;height:28px;border:1px solid currentColor;border-radius:50%;display:grid;place-items:center;font-size:10px}
.ghost-link{display:inline-flex;align-items:center;gap:10px;font-size:14px;color:var(--ink)}
.ghost-link:hover{opacity:.6}
.vis{position:relative;height:540px}
.win{position:absolute;inset:30px 0 40px 30px;background:#fff;box-shadow:0 50px 80px -40px rgba(21,22,25,.45),0 0 0 1px rgba(21,22,25,.06);overflow:hidden}
.win-bar{height:34px;display:flex;align-items:center;gap:6px;padding:0 14px;border-bottom:1px solid var(--line);background:#fafafa}
.win-bar i{width:8px;height:8px;border-radius:50%;background:#d6d9de}
.win-bar span{margin-left:14px;font-size:11px;color:var(--mute)}
.win-body{height:calc(100% - 34px);overflow:hidden;background:var(--bg2)}
.win-body img{width:100%;height:auto;filter:grayscale(1) contrast(1.04);transition:filter .6s}
.vis:hover .win-body img{filter:none}
.chip{position:absolute;background:#fff;box-shadow:var(--shadow);padding:12px 16px;display:flex;align-items:center;gap:12px;font-size:13px;z-index:2}
.chip b{display:block;font-weight:500;color:var(--ink)}
.chip small{color:var(--mute);font-size:12px}
.chip .dot{width:7px;height:7px;border-radius:50%;background:var(--acc)}
.chip-1{top:0;right:-10px}
.chip-2{bottom:10px;left:0}
.hero-foot{border-top:1px solid rgba(25,27,31,.08);display:flex;justify-content:space-between;padding:18px 0;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}

/* Khối nội dung */
.sec{padding:110px 0}
.sec.alt{background:var(--bg2)}
.sec-head{display:grid;grid-template-columns:1fr auto;align-items:end;gap:30px;margin-bottom:56px}
.sec-head h2,.final h2,.page-head h1{font-weight:500;font-size:clamp(32px,4vw,54px);line-height:1.06;letter-spacing:-.045em;color:var(--ink)}
.sec-head p{max-width:360px;color:var(--mute);font-size:14.5px}
.label{display:flex;align-items:center;gap:20px;margin-bottom:34px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.label::after{content:"";flex:1;height:1px;background:var(--line)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.step{padding:34px 34px 10px 0;border-right:1px solid var(--line);margin-right:34px}
.step:last-child{border-right:0;margin-right:0}
.step .mono{display:block;margin-bottom:46px}
.step h3{font-weight:500;font-size:22px;letter-spacing:-.03em;color:var(--ink);margin-bottom:12px}
.step p{color:var(--mute);font-size:14.5px;line-height:1.7;max-width:320px}
.step .ic{color:var(--ink);margin-bottom:22px}

/* Lưới mẫu giao diện */
.themes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px 34px}
.tcard{display:block;color:var(--ink)}
.tcard .shot{position:relative;aspect-ratio:7/5;overflow:hidden;border:1px solid var(--line);background:var(--bg2)}
.tcard .shot img{width:100%;height:auto;min-height:100%;object-fit:cover;object-position:top;transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
.tcard:hover .shot img{transform:translateY(-6%)}
.tcard .shot .hover{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:10px;background:rgba(21,22,25,.38);opacity:0;transition:opacity .25s}
.tcard:hover .shot .hover{opacity:1}
.tcard .meta{padding-top:18px}
.tcard .meta .mono{display:block;margin-bottom:8px}
.tcard h3{font-weight:400;font-size:20px;letter-spacing:-.03em}
.tcard.blank .shot{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:#fff}
.more-row{display:flex;justify-content:center;margin-top:64px}

/* Kho mẫu */
.page-head{padding:90px 0 40px;display:grid;grid-template-columns:1fr auto;align-items:end;gap:30px}
.page-head p{max-width:360px;color:var(--mute);font-size:14.5px}
.filters{display:flex;flex-wrap:wrap;gap:4px 6px;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:46px;align-items:center}
.filters .chips{display:flex;flex-wrap:wrap;gap:4px 6px;flex:1;min-width:0}
.filters a{padding:8px 12px;font-size:14px;color:var(--mute);border-bottom:1px solid transparent}
.filters a:hover{color:var(--ink)}
.filters a.on{color:var(--ink);border-bottom-color:var(--ink)}
.filters form{margin-left:auto}
.search{display:flex;align-items:center;gap:8px;height:38px;padding:0 14px;border-radius:99px;background:var(--bg2);min-width:240px;color:var(--mute)}
.search input{border:0;background:none;outline:none;flex:1;color:var(--ink)}
.pager{display:flex;justify-content:center;gap:6px;margin-top:70px}
.pager a,.pager span{min-width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--line);border-radius:99px;padding:0 12px;font-size:13px}
.pager span.on{background:var(--dark);border-color:var(--dark);color:#fff}
.empty{padding:80px 20px;text-align:center;color:var(--mute)}
.empty h3{color:var(--ink);font-weight:500;font-size:20px;margin-bottom:8px}

/* Bảng giá */
.plans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line)}
.plan{padding:34px 28px;border-right:1px solid var(--line);display:flex;flex-direction:column;background:#fff}
.plan:last-child{border-right:0}
.plan.hot{background:var(--dark);color:#d9dce1}
.plan.hot h3,.plan.hot .price{color:#fff}
.plan h3{font-weight:500;font-size:20px;color:var(--ink);letter-spacing:-.02em;margin-bottom:6px}
.plan .note{font-size:13px;color:var(--mute);min-height:40px}
.plan.hot .note{color:#9aa0aa}
.price{font-size:38px;font-weight:500;letter-spacing:-.04em;color:var(--ink);margin:26px 0 4px}
.price small{font-size:13px;font-weight:400;letter-spacing:0;color:var(--mute)}
.plan ul{list-style:none;padding:0;margin:26px 0 30px;display:flex;flex-direction:column;gap:11px;font-size:13.5px;flex:1}
.plan li{display:flex;gap:10px;align-items:flex-start}
.plan li .ic{margin-top:2px;color:var(--ok)}
.plan.hot li .ic{color:#86efac}
.fine{font-size:12.5px;color:var(--mute);margin-top:20px}

/* Kêu gọi cuối + chân trang */
.final{background:var(--dark);color:#d9dce1;padding:110px 0;text-align:center}
.final h2{color:#fff;margin-bottom:22px}
.final h2 span{color:#8e96a3}
.final p{color:#9aa0aa;margin-bottom:36px}
.foot{background:var(--dark);color:#9aa0aa;border-top:1px solid rgba(255,255,255,.08);padding:64px 0 30px;font-size:13.5px}
.foot-top{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:40px}
.foot .logo{color:#fff}
.foot .logo .op-word b{color:#6b7280}
.foot p{margin:16px 0 20px;max-width:360px}
.foot ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.foot li{display:flex;gap:10px;align-items:flex-start}
.foot h4{color:#fff;font-weight:500;font-size:13px;margin-bottom:16px}
.foot a:hover{color:#fff}
.foot-bot{display:flex;justify-content:space-between;margin-top:56px;padding-top:22px;border-top:1px solid rgba(255,255,255,.08);font-size:12px}

/* Xem trước mẫu */
.pv{display:flex;flex-direction:column;height:100vh;background:var(--bg3)}
.pv-bar{height:60px;flex:none;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 18px;background:#fff;border-bottom:1px solid var(--line)}
.pv-bar .l{display:flex;align-items:center;gap:14px;min-width:0}
.pv-bar .l b{font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv-bar .r{justify-self:end;display:flex;gap:10px}
.dev{display:flex;gap:2px;background:var(--bg2);border-radius:99px;padding:3px}
.dev button{width:38px;height:32px;border:0;background:none;border-radius:99px;display:grid;place-items:center;cursor:pointer;color:var(--mute)}
.dev button.on{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.pv-stage{flex:1;display:flex;justify-content:center;padding:18px;overflow:hidden}
.pv-stage iframe{width:100%;height:100%;border:0;background:#fff;box-shadow:var(--shadow);transition:width .35s cubic-bezier(.2,.7,.2,1)}
.icon-btn{width:36px;height:36px;display:inline-grid;place-items:center;border:0;background:transparent;border-radius:50%;cursor:pointer;color:var(--txt)}
.icon-btn:hover{background:var(--bg2);color:var(--ink)}

/* ==========================================================
   Đăng nhập / đăng ký
   ========================================================== */
.auth{min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:#fff}
.auth-side{background:linear-gradient(180deg,#eceef1 0%,#dfe2e6 100%);padding:40px 56px;display:flex;flex-direction:column;justify-content:space-between}
.auth-side h2{font-weight:500;font-size:clamp(30px,3.4vw,46px);line-height:1.08;letter-spacing:-.045em;color:var(--ink)}
.auth-side h2 span{color:var(--tone)}
.auth-side ul{list-style:none;padding:0;margin:30px 0 0;display:flex;flex-direction:column;gap:12px;color:var(--mute)}
.auth-side li{display:flex;gap:10px;align-items:center}
.auth-main{display:flex;align-items:center;justify-content:center;padding:40px 24px}
.auth-box{width:100%;max-width:400px}
.auth-box h1{font-weight:500;font-size:30px;letter-spacing:-.04em;color:var(--ink);margin-bottom:8px}
.auth-box>p{color:var(--mute);margin-bottom:30px}
.auth-alt{margin-top:22px;font-size:13.5px;color:var(--mute);text-align:center}
.auth-alt a{color:var(--ink);font-weight:500}
.auth-forgot{margin:-8px 0 16px;text-align:right;font-size:13px}
.auth-forgot a{color:var(--mute)}
.auth-forgot a:hover{color:var(--ink)}
.auth-box .alert a{font-weight:600;text-decoration:underline}
.g-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:48px;border:1px solid var(--line,#dfe2e6);border-radius:var(--r,10px);background:#fff;color:var(--ink);font:inherit;font-weight:500;font-size:15px;cursor:pointer;transition:background .15s,border-color .15s}
.g-btn:hover:not(:disabled){background:var(--bg2,#f5f6f8)}
.g-btn:disabled{opacity:.6;cursor:default}
.g-btn svg{width:20px;height:20px;flex:none}
.g-or{display:flex;align-items:center;gap:12px;margin:22px 0;color:var(--mute);font-size:12.5px}
.g-or::before,.g-or::after{content:"";flex:1;height:1px;background:var(--line,#e5e7eb)}
.pw{position:relative}
.pw button{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:none;cursor:pointer;font-size:12px;color:var(--mute);padding:6px 8px}

/* ==========================================================
   Bảng điều khiển
   ========================================================== */
.app{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:100vh;background:var(--bg)}
.side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;border-right:1px solid var(--line2);background:#fafafa;padding:16px 12px}
.side .logo{padding:4px 8px 18px;font-size:18px}
.side-lb{font-size:12px;color:var(--soft);padding:14px 10px 6px}
.side nav{display:flex;flex-direction:column;gap:2px}
.side nav a{display:flex;align-items:center;gap:12px;height:38px;padding:0 10px;border-radius:8px;font-size:14.5px;color:var(--txt)}
.side nav a:hover{background:rgba(24,24,27,.04);color:var(--ink)}
.side nav a.on{background:rgba(24,24,27,.06);color:var(--ink);font-weight:500}
.side-help{margin-top:auto;border:1px solid var(--line);background:#fff;border-radius:12px;padding:14px;font-size:13px}
.side-help b{display:block;color:var(--ink);font-weight:500;margin-bottom:4px}
.side-help a{display:flex;align-items:center;gap:8px;color:var(--mute);margin-top:6px}
.side-help a:hover{color:var(--ink)}
.side-user{display:flex;align-items:center;gap:10px;padding:14px 6px 2px;border-top:1px solid var(--line2);margin-top:14px}
.ava{width:32px;height:32px;border-radius:50%;background:var(--acc);color:#fff;display:grid;place-items:center;font-weight:600;font-size:13px;flex:none;overflow:hidden}
.ava img{width:100%;height:100%;object-fit:cover}
.side-user .nm{flex:1;min-width:0;font-size:13px;line-height:1.3}
.side-user .nm b{display:block;font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-user .nm small{color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.main{padding:34px 40px 60px;min-width:0}
.m-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:28px;flex-wrap:wrap}
.m-head h1{font-weight:500;font-size:24px;letter-spacing:-.03em;color:var(--ink)}
.m-head p{color:var(--mute);margin-top:4px}
.m-head .btns{display:flex;gap:10px;flex-wrap:wrap}
.back{display:inline-flex;align-items:center;gap:6px;color:var(--mute);font-size:13px;margin-bottom:14px}
.back:hover{color:var(--ink)}
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}
.toolbar .cnt{color:var(--mute)}
.toolbar .cnt b{font-weight:500;color:var(--ink)}

.sites{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:26px}
.scard{display:block;color:var(--ink)}
.scard .shot{aspect-ratio:13/10;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--bg2);position:relative}
.scard .shot iframe{position:absolute;top:0;left:0;width:1280px;height:985px;border:0;transform-origin:0 0;pointer-events:none}
.scard .shot .ph{position:absolute;inset:0;display:grid;place-items:center;color:var(--soft)}
.scard:hover .shot{border-color:#cfd2d8}
.scard .meta{padding:12px 2px 0}
.scard h3{font-weight:500;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scard .sub{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--mute);margin-top:2px;flex-wrap:wrap}
.scard .dom{font-size:12.5px;color:var(--soft);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scard.new .shot{border-style:dashed;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--ink);background:#fafafa}
.scard.new:hover .shot{background:var(--bg2)}

.panel{background:#fff;border:1px solid var(--line);border-radius:12px}
.panel+.panel{margin-top:20px}
.panel-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px;border-bottom:1px solid var(--line2)}
.panel-h h2{font-weight:500;font-size:16px;color:var(--ink)}
.panel-b{padding:22px}
.kv{display:grid;grid-template-columns:160px 1fr;gap:14px 20px;font-size:14px}
.kv dt{color:var(--mute)}
.kv dd{margin:0;color:var(--ink);min-width:0;word-break:break-word}
.grid-2{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:20px;align-items:start}
.site-hero{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:20px;margin-bottom:20px}
.site-shot{aspect-ratio:16/10;border:1px solid var(--line);border-radius:12px;overflow:hidden;position:relative;background:var(--bg2)}
.site-shot iframe{position:absolute;top:0;left:0;width:1440px;height:900px;border:0;transform-origin:0 0;pointer-events:none}
.acts{display:flex;flex-direction:column;gap:10px}
.act{display:flex;align-items:center;gap:14px;padding:16px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);text-align:left;cursor:pointer;width:100%}
.act:hover{border-color:#cfd2d8}
.act .ic-w{width:38px;height:38px;border-radius:10px;background:var(--bg2);display:grid;place-items:center;flex:none}
.act b{display:block;font-weight:500}
.act small{color:var(--mute);font-size:12.5px}
.act.soon{cursor:default;opacity:.65}
.act.soon:hover{border-color:var(--line)}
.tag-soon{font-size:11px;background:var(--acc-50);color:#c2410c;padding:2px 8px;border-radius:99px;margin-left:6px;font-weight:500}
.inline-edit{display:flex;gap:8px;align-items:center}
.inline-edit .in{height:38px}

.table{width:100%;border-collapse:collapse;font-size:14px}
.table th{text-align:left;font-weight:500;color:var(--mute);font-size:12.5px;padding:10px 16px;border-bottom:1px solid var(--line2);background:#fafafa}
.table td{padding:14px 16px;border-bottom:1px solid var(--line2);color:var(--ink);vertical-align:middle}
.table tr:last-child td{border-bottom:0}
.table .nm{font-weight:500}
.table small{display:block;color:var(--mute);font-size:12.5px}

/* Tạo website */
.create{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:28px;align-items:start}
.pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:20px}
.pick label{cursor:pointer;display:block;position:relative;min-width:0}
.pick input{position:absolute;opacity:0;pointer-events:none}
.pick .shot{display:block;aspect-ratio:7/5;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--bg2);transition:box-shadow .15s,border-color .15s}
.pick .shot img{width:100%;height:auto;min-height:100%;object-fit:cover;object-position:top}
.pick input:checked+.shot{border-color:var(--ink);box-shadow:0 0 0 2px var(--ink)}
.pick small{display:block;margin-top:8px;font-size:13px;color:var(--ink)}
.chosen{display:flex;gap:14px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:12px;margin-bottom:20px}
.chosen img{width:96px;aspect-ratio:7/5;object-fit:cover;object-position:top;border-radius:6px;border:1px solid var(--line)}
.chosen b{display:block;font-weight:500;color:var(--ink)}
.sticky{position:sticky;top:24px}
.alias-st{font-size:12.5px;min-height:18px}
.alias-st.ok{color:var(--ok)}.alias-st.err{color:var(--err)}

/* Thông báo nổi */
.toasts{position:fixed;right:20px;bottom:20px;z-index:200;display:flex;flex-direction:column;gap:10px}
.toast{background:var(--dark);color:#fff;padding:12px 16px;border-radius:10px;font-size:13.5px;box-shadow:var(--shadow);max-width:360px;animation:tin .25s ease}
.toast.err{background:#991b1b}
@keyframes tin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.flash{margin-bottom:20px}

/* ---------- Màn hình nhỏ ---------- */
@media (max-width:1080px){
  .plans{grid-template-columns:repeat(2,1fr)}
  .plan:nth-child(2){border-right:0}
  .plan:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .create{grid-template-columns:1fr}
  .site-hero,.grid-2{grid-template-columns:1fr}
}
@media (max-width:900px){
  .wrap{padding:0 20px}
  .nav-in{grid-template-columns:1fr auto}
  .nav nav{display:none}
  .nav.open nav{display:flex;flex-direction:column;position:absolute;top:72px;left:0;right:0;background:#fff;padding:16px 20px;gap:16px;border-bottom:1px solid var(--line)}
  .nav-burger{display:block}
  .nav-r .mono-link.hide-sm{display:none}
  .hero-in{grid-template-columns:1fr;min-height:0;padding-top:50px}
  .vis{height:380px}
  .sec{padding:72px 0}
  .sec-head,.page-head{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .step{border-right:0;margin-right:0;border-bottom:1px solid var(--line);padding-right:0}
  .step .mono{margin-bottom:20px}
  .themes{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 20px}
  .foot-top{grid-template-columns:1fr}
  .auth{grid-template-columns:1fr}
  .auth-side{display:none}
  .app{grid-template-columns:minmax(0,1fr)}
  .side,.main{min-width:0}
  .side{position:static;height:auto;border-right:0;border-bottom:1px solid var(--line2);padding:12px 16px}
  .side nav{flex-direction:row;overflow-x:auto;gap:4px}
  .side nav a{white-space:nowrap}
  .side-lb,.side-help,.side-user{display:none}
  .main{padding:24px 16px 48px}
  .pv-bar{grid-template-columns:1fr auto}
  .pv-bar .dev{display:none}
  .filters{flex-direction:column;align-items:stretch}
  .filters .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;order:2}
  .filters .chips::-webkit-scrollbar{display:none}
  .filters .chips a{white-space:nowrap;flex:none}
  .filters form{margin:0 0 6px;width:100%}
  .filters .search{width:100%;min-width:0}
  .filters .search input{min-width:0;width:100%}
  .search{min-width:0;width:100%}
}
@media (max-width:600px){
  .themes{grid-template-columns:1fr}
  .plans{grid-template-columns:1fr}
  .plan{border-right:0!important;border-bottom:1px solid var(--line)}
  .f-2{grid-template-columns:1fr}
  .kv{grid-template-columns:1fr;gap:4px}
  .kv dd{margin-bottom:10px}
  .table th:nth-child(3),.table td:nth-child(3){display:none}
  .chip{display:none}
}

/* ==========================================================
   Quản lý nội dung website: thanh mục, bài viết, danh mục
   ========================================================== */
.s-tabs{display:flex;align-items:center;gap:4px;border-bottom:1px solid var(--line);margin:-8px 0 24px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.s-tabs a{display:flex;align-items:center;gap:7px;height:42px;padding:0 14px;color:var(--mute);font-weight:500;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.s-tabs a:hover{color:var(--ink)}
.s-tabs a.on{color:var(--ink);border-bottom-color:var(--ink)}
.s-tabs .s-tab-edit{margin-left:auto;color:var(--ink)}
.btn.danger{background:var(--err);color:#fff}
.btn.danger:hover{background:#b91c1c}
.in.sm{height:38px;font-size:13.5px;border-radius:99px;padding:0 14px;width:auto}
.p-tools{flex-wrap:wrap}
.seg-links{display:flex;padding:3px;background:var(--bg2);border-radius:99px}
.seg-links a{height:32px;display:flex;align-items:center;padding:0 14px;border-radius:99px;color:var(--mute);font-size:13.5px;font-weight:500}
.seg-links a.on{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.p-filter{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.p-row{display:flex;align-items:center;gap:14px;min-width:0}
.p-row b{display:block;font-weight:500;color:var(--ink);line-height:1.4}
.p-row:hover b{text-decoration:underline}
.p-row small{display:block;color:var(--mute);font-size:12.5px;margin-top:2px}
.p-th{width:64px;height:44px;border-radius:8px;background:var(--bg2) center/cover no-repeat;flex:none;display:grid;place-items:center;color:var(--soft)}
.p-acts{text-align:right;white-space:nowrap}
.p-acts .icon-btn{color:var(--mute)}
.p-count{text-align:center;margin-top:14px;font-size:13px}
/* công tắc bật / tắt */
.tg{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:13px;color:var(--mute);user-select:none}
.tg input{position:absolute;opacity:0;width:0;height:0}
.tg i{width:36px;height:20px;border-radius:99px;background:var(--line);position:relative;transition:background .2s;flex:none}
.tg i::after{content:"";position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .2s}
.tg input:checked+i{background:var(--ok)}
.tg input:checked+i::after{transform:translateX(16px)}
.tg input:checked~span{color:#15803d}
.tg input:focus-visible+i{box-shadow:0 0 0 3px rgba(25,27,31,.12)}
.tg input:disabled+i{opacity:.5}
.tg.big{font-size:14px;color:var(--ink);font-weight:500}
.tg.big input:checked~span{color:var(--ink)}
/* soạn bài */
.pf-img{width:100%;aspect-ratio:16/10;border:1.5px dashed var(--line);border-radius:10px;background:var(--bg2) center/cover no-repeat;cursor:pointer;display:grid;place-items:center;color:var(--mute);padding:0}
.pf-img span{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;padding:6px 12px;border-radius:99px;background:rgba(255,255,255,.9)}
.pf-img.has{border-style:solid}
.pf-img.has span{opacity:0;transition:opacity .2s}
.pf-img.has:hover span{opacity:1}
.pf-img-rm{background:none;border:0;font-size:12.5px;color:var(--mute);margin-top:8px;align-self:flex-start}
/* danh mục */
.c-add{display:flex;gap:10px;padding:18px 22px;border-bottom:1px solid var(--line2)}
.c-add .in{flex:1;max-width:420px}
.c-name b{font-weight:500}
/* hộp thoại, chọn ảnh */
.dlg{position:fixed;inset:0;z-index:300;background:rgba(21,22,25,.45);display:grid;place-items:center;padding:20px;animation:tin .15s ease}
.dlg-box{width:min(440px,100%);background:#fff;border-radius:14px;box-shadow:var(--shadow);padding:22px 22px 18px}
.dlg-box.wide{width:min(760px,100%);max-height:calc(100vh - 40px);overflow:auto}
.dlg-box h3{font-size:17px;font-weight:600;color:var(--ink);margin-bottom:8px}
.dlg-box p{color:var(--txt);margin-bottom:6px}
.dlg-box .in{margin-top:10px}
.dlg-act{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}
.dlg-h{display:flex;align-items:center;justify-content:space-between;margin:-6px -6px 14px 0}
.dlg-h h3{margin:0}
.pick-drop{display:flex;flex-direction:column;align-items:center;gap:6px;padding:22px;border:1.5px dashed var(--line);border-radius:12px;text-align:center;cursor:pointer;color:var(--mute)}
.pick-drop b{color:var(--ink);font-weight:600}
.pick-drop small{font-size:12px}
.pick-drop:hover,.pick-drop.over{border-color:var(--ink);background:var(--bg2)}
.pick-drop.busy{pointer-events:none;opacity:.6}
.pick-ai{margin-top:12px;padding:14px;border:1px solid var(--line);border-radius:12px;display:flex;flex-direction:column;gap:8px;background:var(--acc-50)}
.pick-ai b{font-weight:600;color:var(--ink)}
.pick-ai textarea.in{height:auto;padding:10px 12px;resize:vertical;line-height:1.5;background:#fff}
.pick-ai-r{display:flex;gap:8px;flex-wrap:wrap}
.pick-ai-r .in{height:36px;width:auto;flex:1;min-width:110px;background:#fff;font-size:13.5px}
.pick-ai-r .btn{flex:none}
.pick-ai small{color:var(--mute);font-size:12px}
.pick-t{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin:18px 0 10px}
.pick-gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.pick-gal button{aspect-ratio:4/3;border:1px solid var(--line);border-radius:10px;background:var(--bg2) center/cover no-repeat;cursor:pointer;padding:0}
.pick-gal button:hover{border-color:var(--ink);box-shadow:0 0 0 3px rgba(25,27,31,.08)}
.pick-gal button.cur{border-color:var(--acc);box-shadow:0 0 0 3px rgba(249,115,22,.25)}
.pick-empty{grid-column:1/-1;padding:24px;text-align:center;color:var(--mute)}
@media (max-width:980px){
  .p-table th:nth-child(2),.p-table td:nth-child(2){width:auto!important}
}
@media (max-width:640px){
  .p-filter{width:100%}
  .p-filter .in.sm,.p-filter .search{flex:1 1 100%;min-width:0;width:100%}
  .p-table thead,.c-table thead{display:none}
  .p-table tr,.c-table tr{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:14px 16px;border-bottom:1px solid var(--line2)}
  .p-table td,.c-table td{border:0;padding:0;width:auto!important}
  .p-table td:first-child,.c-table td:first-child{flex:1 1 100%}
  .p-table td:nth-child(2),.c-table td:nth-child(3){flex:1}
  .p-row b{word-break:break-word}
  .s-tabs .s-tab-edit{margin-left:0}
  .c-add{flex-direction:column}
  .c-add .in{max-width:none;flex:none}
  .p-table td:nth-child(3),.c-table td:nth-child(3),.c-table td:nth-child(4){display:block}
}

/* ---------- Cài đặt > Tên miền (theo webad > Tên miền) ---------- */
.st-main>.dm{scroll-margin-top:20px}
.dm>.panel+.panel{margin-top:20px}
.dm.is-busy{opacity:.6;pointer-events:none}
.dm-h{display:flex;align-items:flex-start;gap:14px;min-width:0}
.dm-h .st-sub{margin:3px 0 0}
.dm-ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;flex:none;background:var(--bg2);color:var(--ink)}
.dm-ic.ok{background:#f0fdf4;color:#15803d}.dm-ic.blue{background:#eff6ff;color:#1d4ed8}.dm-ic.brand{background:var(--acc-50);color:#c2410c}
.dm-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 22px;border-bottom:1px solid var(--line2)}
.dm-row:last-child{border-bottom:0}
.dm-row .m{min-width:0;display:flex;flex-direction:column;gap:2px}
.dm-row .m b{font-weight:500;color:var(--ink);word-break:break-all}
.dm-row .m span{font-size:13px;color:var(--mute)}
.dm-row .acts{display:flex;flex-direction:row;gap:8px;flex-wrap:wrap;justify-content:flex-end;flex:none}
.dm-tg .tg{flex:none}
.pill{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:99px;font-size:12.5px;font-weight:500;white-space:nowrap;flex:none;background:var(--bg2);color:var(--mute)}
.pill.ok{background:#f0fdf4;color:#15803d}.pill.warn{background:#fffbeb;color:#b45309}.pill.bad{background:#fef2f2;color:#b91c1c}
.dm-steps{margin:0 0 18px;padding:0;list-style:none;counter-reset:s;display:flex;flex-direction:column;gap:10px}
.dm-steps li{counter-increment:s;display:flex;gap:12px;align-items:flex-start;color:var(--txt)}
.dm-steps li::before{content:counter(s);width:24px;height:24px;border-radius:50%;background:var(--dark);color:#fff;font-size:12px;font-weight:600;display:grid;place-items:center;flex:none;margin-top:-1px}
.dm code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;background:var(--bg2);padding:2px 7px;border-radius:6px;color:var(--ink)}
.dm-dns{border:1px solid var(--line2);border-radius:10px;border-collapse:separate;border-spacing:0;overflow:hidden;margin-bottom:20px}
.dm-dns td{padding:10px 16px}
.dm-dns th:nth-child(3),.dm-dns td:nth-child(3){display:table-cell}
.dm-dns td:first-child,.dm-dns th:first-child{width:80px}
.dm-dns td:nth-child(2),.dm-dns th:nth-child(2){width:90px}
.icon-btn.sm{width:28px;height:28px;vertical-align:middle}
.dm-form .f{margin-bottom:0}
.dm-in{display:flex;gap:10px}
.dm-in .in{flex:1;min-width:0}
.dm-in .btn{height:44px}
.dm-res{margin:16px -22px 0;border-top:1px solid var(--line2)}
.dm-res .dm-row:last-child{border-bottom:1px solid var(--line2)}
[data-dm-go]{margin-top:16px}
.dm-note{align-items:center;justify-content:space-between;margin:0;flex-wrap:wrap}
@media (max-width:640px){
  .dm-row{flex-wrap:wrap;padding:14px 16px}
  .dm-row .acts{justify-content:flex-start;flex:1 1 100%}
  .dm-in{flex-direction:column}
  .dm-in .in{flex:none}
  .dm-dns td,.dm-dns th{padding:10px 12px}
  .dm-dns td:first-child,.dm-dns th:first-child{width:56px}
  .dm-dns td:nth-child(2),.dm-dns th:nth-child(2){width:64px}
  .dm-res{margin:16px -16px 0}
}

/* ---------- Danh sách bài viết (theo prototype app/posts): tab + dòng có ảnh bìa + menu "…" ---------- */
.flex1{flex:1}
.pl{overflow:visible}
.pl-tabs{display:flex;align-items:center;gap:4px;padding:0 20px;border-bottom:1px solid var(--line2);min-height:60px;flex-wrap:wrap}
.pl-tabs>a{height:60px;display:flex;align-items:center;padding:0 12px;color:var(--mute);font-size:14.5px;font-weight:500;border-bottom:2px solid transparent;margin-bottom:-1px}
.pl-tabs>a:hover{color:var(--ink)}
.pl-tabs>a.on{color:var(--ink);border-bottom-color:var(--ink)}
.pl-filter{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:10px 0}
.pl-list{display:flex;flex-direction:column}
.pl-row{display:flex;align-items:center;gap:20px;padding:14px 20px;border-bottom:1px solid var(--line2);transition:background .15s}
.pl-row:last-child{border-bottom:0;border-radius:0 0 12px 12px}
.pl-row:hover{background:var(--bg2)}
.pl-cover{width:112px;height:72px;border-radius:8px;background:var(--bg3) center/cover no-repeat;flex:none;display:grid;place-items:center;color:var(--soft)}
.pl-main{flex:1;min-width:0}
.pl-title{display:block;font-size:15px;font-weight:500;color:var(--ink);margin-bottom:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-title:hover{text-decoration:underline}
.pl-meta{display:flex;align-items:center;gap:8px;color:var(--mute);font-size:13px;flex-wrap:wrap}
.pl-meta i{font-style:normal;color:var(--line)}
.pl-acts{display:flex;align-items:center;gap:8px;flex:none}
.more-btn{width:32px;height:32px;border-radius:50%;border:0;background:none;color:var(--mute);display:inline-grid;place-items:center;cursor:pointer;flex:none}
.more-btn:hover,.more-btn.on{background:rgba(24,24,27,.07);color:var(--ink)}
.pl-empty{display:flex;flex-direction:column;align-items:center;gap:12px;padding:72px 20px;color:var(--mute);text-align:center}
.pl-empty b{color:var(--ink);font-weight:500;font-size:16px}
.pl-row.is-busy{opacity:.5;pointer-events:none}
.pop-menu{position:fixed;z-index:300;min-width:220px;background:#fff;border-radius:12px;box-shadow:var(--shadow);padding:6px;display:flex;flex-direction:column}
.pop-menu button,.pop-menu a{display:flex;align-items:center;gap:10px;height:38px;padding:0 12px;border:0;background:none;border-radius:8px;cursor:pointer;color:var(--ink);font-size:14px;text-align:left;white-space:nowrap}
.pop-menu button:hover,.pop-menu a:hover,.pop-menu :focus-visible{background:var(--bg2);outline:none}
.pop-menu .ic{color:var(--mute)}
.pop-menu .danger,.pop-menu .danger .ic{color:var(--err)}
.pop-menu hr{border:0;border-top:1px solid var(--line2);margin:5px 4px}
@media (max-width:640px){
  .pl-tabs{padding:0 12px}
  .pl-tabs>a{height:52px;padding:0 10px}
  .pl-filter{width:100%;padding:0 0 12px}
  .pl-filter .in.sm,.pl-filter .search{flex:1 1 100%;min-width:0;width:100%}
  .pl-row{flex-wrap:wrap;gap:12px;padding:14px 16px}
  .pl-cover{width:84px;height:56px}
  .pl-title{white-space:normal;word-break:break-word}
  .pl-acts{width:100%;justify-content:flex-end}
}

/* ---------- Quản trị Opend ---------- */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:16px}
.stats.three{grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:20px}
.stat{display:block;background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 20px;color:var(--ink);min-width:0}
a.stat:hover{border-color:#cfd2d8}
.stat .lb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--mute)}
.stat b{display:block;font-size:26px;font-weight:500;letter-spacing:-.03em;margin:10px 0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat small{display:block;font-size:12.5px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat.hl{background:var(--dark);border-color:var(--dark);color:#fff}
.stat.hl .lb,.stat.hl small{color:rgba(255,255,255,.65)}
.due-chips{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px}
.due-chips a{display:flex;align-items:center;gap:12px;padding:10px 16px;border:1px solid var(--line);border-radius:99px;background:#fff}
.due-chips a:hover{border-color:#cfd2d8}
.due-chips b{font-weight:600;color:var(--ink)}
.a-note{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.55}
.a-note .ic{flex:none;margin-top:2px}
.panel-h+.a-note,.table+.a-note{border-top:1px solid var(--line2)}
.a-table td{vertical-align:top}
.a-table .p-acts{vertical-align:middle}
.a-table .p-acts .btn{vertical-align:middle}
.a-table .p-acts .btn+.btn{margin-left:8px}
.a-tabs{flex-wrap:wrap;border-radius:18px}
.a-tabs a i{font-style:normal;font-size:12px;color:var(--soft);margin-left:6px}
.a-tabs a.on i{color:var(--mute)}
.a-kv{grid-template-columns:110px 1fr}
/* gia hạn */
.rn-lb{font-size:13px;font-weight:500;color:var(--ink);margin:2px 0 10px}
.rn-pkgs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:8px}
.rn-pkg{position:relative;cursor:pointer;display:block;min-width:0}
.rn-pkg input{position:absolute;opacity:0;pointer-events:none}
.rn-pkg>span{display:block;height:100%;border:1px solid var(--line);border-radius:10px;padding:12px 14px;transition:border-color .15s,box-shadow .15s}
.rn-pkg b{display:block;font-weight:500;color:var(--ink);margin-bottom:4px}
.rn-pkg b em{font-style:normal;font-size:11px;font-weight:500;color:#15803d;background:#f0fdf4;padding:1px 7px;border-radius:99px;margin-left:4px;white-space:nowrap}
.rn-pkg small{display:block;font-size:12px;color:var(--mute)}
.rn-pkg input:checked+span{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.rn-pkg input:focus-visible+span{box-shadow:0 0 0 3px rgba(25,27,31,.15)}
.rn-pkg.off{cursor:not-allowed;opacity:.45}
.rn-hint{font-size:12.5px;margin-bottom:6px}
.rn-months{flex-wrap:wrap;border-radius:18px;margin:0 0 20px;display:inline-flex}
.rn-months label{cursor:pointer}
.rn-months input{position:absolute;opacity:0;pointer-events:none}
.rn-months span{height:32px;display:flex;align-items:center;padding:0 14px;border-radius:99px;color:var(--mute);font-size:13.5px;font-weight:500}
.rn-months input:checked+span{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.rn-months input:focus-visible+span{box-shadow:0 0 0 2px var(--ink)}
.rn-quote{border:1px solid var(--line2);background:#fafafa;border-radius:10px;padding:14px 16px;margin-bottom:16px;min-height:120px;transition:opacity .15s}
.rn-quote.busy{opacity:.55}
.rn-tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.rn-tbl td{padding:4px 0;color:var(--txt)}
.rn-tbl td:last-child{text-align:right;white-space:nowrap;padding-left:12px}
.rn-tbl tr.sub td{border-top:1px solid var(--line);padding-top:8px;color:var(--ink)}
.rn-tbl tr.tot td{border-top:1px solid var(--line);padding-top:10px;font-size:16px;font-weight:600;color:var(--ink)}
.rn-dates{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:13px;color:var(--mute);margin-top:12px}
.rn-dates b,.rn-sell b,.rn-bal b{color:var(--ink);font-weight:500}
.rn-sell,.rn-bal{font-size:13px;color:var(--mute);margin-top:6px}
.rn-bal.low{color:#b91c1c}
.rn-bal.low b{color:#b91c1c}
.dlg-kv{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:14px 0 4px;padding:14px 16px;background:var(--bg2);border-radius:10px;font-size:13.5px}
.dlg-kv dt{color:var(--mute)}
.dlg-kv dd{margin:0;text-align:right;color:var(--ink)}
.dlg-kv dd.b{font-weight:600;font-size:15px}
.dlg-note{font-size:12.5px;color:var(--mute)!important;margin-top:10px}
@media (max-width:1080px){
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:980px){
  .a-site{grid-template-columns:1fr}
}
@media (max-width:640px){
  .stats,.stats.three{grid-template-columns:minmax(0,1fr)}
  .rn-pkgs{grid-template-columns:minmax(0,1fr)}
  .a-table thead{display:none}
  .a-table tr{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:14px 16px;border-bottom:1px solid var(--line2)}
  .a-table td{border:0;padding:0;display:block}
  .a-table td:first-child{flex:1 1 100%}
  .a-table td[style*="right"]{text-align:left!important}
  .a-table .p-acts{margin-left:auto}
}.grid-2>.panel+.panel{margin-top:0}
@media (max-width:640px){.a-table td:nth-child(3){display:block}.a-table small{display:inline}.a-table small::before{content:" · "}.a-table td small:first-child::before{content:none}}

/* ---------- Ba khu quản lý: tài khoản (.app), quản trị website (.app.mng), admin hệ thống (.app.adm) ---------- */
.side-back{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--mute);padding:0 10px 12px}
.side-back:hover{color:var(--ink)}
.side-site{margin:0 4px 6px;padding:12px;border:1px solid var(--line);border-radius:12px;background:#fff;display:flex;flex-direction:column;gap:3px;min-width:0}
.side-site b{font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-site a{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-site a:hover{color:var(--ink)}
.side-site .badge{font-size:12px;margin-top:4px}
/* Admin hệ thống: khung theo prototype admin (UI.shell variant admin / .wz): sidebar xám nhạt, nhãn Admin, thẻ ngữ cảnh, mục theo nhóm */
.app.adm .side{background:var(--bg2);border-right-color:var(--line);padding:14px 10px 12px;gap:6px;overflow:hidden}
.adm-brand{display:flex;align-items:center;gap:8px;padding:2px 4px 8px 8px}
.adm-brand .logo{flex:1;min-width:0;padding:0;font-size:17px;gap:8px}
.adm-badge{font-size:10.5px;font-weight:600;background:var(--acc-50);color:#c2410c;padding:2px 7px;border-radius:99px}
.adm-ib{width:30px;height:30px;border:0;background:none;border-radius:8px;display:inline-grid;place-items:center;color:var(--mute);cursor:pointer;flex:none}
.adm-ib:hover{background:rgba(24,24,27,.06);color:var(--ink)}
.adm-switch{display:flex;align-items:center;gap:8px;height:42px;padding:0 10px 0 8px;background:#fff;border:1px solid var(--line);border-radius:10px;margin-bottom:8px;min-width:0}
.adm-av{width:22px;height:22px;border-radius:6px;background:var(--ink);color:#fff;display:grid;place-items:center;flex:none}
.adm-switch .t{flex:1;min-width:0;font-size:14px;font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adm-switch .tag{font-size:10.5px;font-weight:500;color:var(--mute);background:var(--bg2);border:1px solid var(--line);padding:1px 6px;border-radius:5px;white-space:nowrap;text-transform:uppercase;letter-spacing:.02em}
.app.adm .side nav{flex:1;overflow:auto;gap:1px;min-height:0}
.app.adm .side nav a{gap:10px;height:34px;font-size:14.5px;color:var(--ink);white-space:nowrap}
.app.adm .side nav a .ic{color:#52525b}
.app.adm .side nav a span{overflow:hidden;text-overflow:ellipsis}
.app.adm .side nav a:hover{background:rgba(24,24,27,.04)}
.app.adm .side nav a.on{background:rgba(24,24,27,.07);font-weight:500}
.app.adm .side nav a.on .ic{color:var(--ink)}
.adm-lb{font-size:12.5px;color:var(--soft);padding:14px 10px 4px}
.adm-me{display:flex;align-items:center;gap:2px;padding:8px 2px 0;border-top:1px solid var(--line);min-width:0}
.adm-me form{display:contents}
.adm-avatar{width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;flex:none;margin-right:8px}
.adm-me .nm{flex:1;min-width:0;font-size:12.5px;line-height:1.3}
.adm-me .nm b{display:block;font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adm-me .nm small{display:block;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* thu gọn sidebar (nhớ trong trình duyệt) */
.app.adm{transition:grid-template-columns .2s ease}
.adm-collapsed .app.adm{grid-template-columns:64px minmax(0,1fr)}
.adm-collapsed .adm-brand .op-word,.adm-collapsed .adm-badge,.adm-collapsed .adm-switch .t,.adm-collapsed .adm-switch .tag,.adm-collapsed .app.adm .side nav a span,.adm-collapsed .adm-lb,.adm-collapsed .adm-me .nm,.adm-collapsed .adm-me .adm-ib{display:none}
.adm-collapsed .adm-brand{flex-direction:column;padding:2px 0 8px;gap:10px}
.adm-collapsed .adm-brand .logo{flex:none}
.adm-collapsed .adm-switch{justify-content:center;padding:0;background:none;border:0}
.adm-collapsed .app.adm .side nav a{justify-content:center;padding:0}
.adm-collapsed .adm-me{justify-content:center;border-top:0}
.adm-collapsed .adm-avatar{margin:0}
.app.adm .main{max-width:1320px;width:100%;margin:0 auto;padding:40px 40px 64px}
.app.adm .m-head h1{font-size:22px;letter-spacing:-.015em}
.app.adm .m-head p{font-size:13.5px}
/* đăng nhập admin: nền sáng như khu quản trị */
body.adm-auth{min-height:100vh;background:var(--bg2);display:grid;place-items:center;padding:24px}
body.adm-auth main{width:min(420px,100%)}
body.adm-auth .adm-brand{justify-content:center;padding:0 0 22px}
body.adm-auth .adm-brand .logo{flex:none;font-size:20px}
body.adm-auth .auth-box{background:#fff;border:1px solid var(--line);border-radius:16px;padding:32px 28px;max-width:none}
body.adm-auth .auth-box h1{font-size:24px}
/* Báo cáo doanh thu (admin/reports) theo prototype */
.kpis4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:20px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:2px;min-width:0}
.kpi small{font-size:12.5px;color:var(--mute)}
.kpi b{font-size:24px;font-weight:500;letter-spacing:-.02em;color:var(--ink);margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi em{font-style:normal;font-size:12px;color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rp-cols{display:grid;grid-template-columns:1.6fr 1fr;gap:20px;align-items:start}
.rp-cols .panel+.panel{margin-top:0}
.rp-card{padding:24px}
.rp-card h3{font-size:15px;font-weight:500;color:var(--ink);margin-bottom:12px}
.rp-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.rp-h h3{margin:0}
.rp-h .seg-links a{height:28px;font-size:12.5px;padding:0 12px}
.rp-bars{display:flex;align-items:flex-end;gap:14px;height:210px;padding-top:10px}
.rp-bars div{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;height:100%;min-width:0}
.rp-bars i{display:block;width:100%;max-width:40px;background:var(--ink);border-radius:4px 4px 0 0}
.rp-bars span{font-size:11.5px;color:var(--mute);white-space:nowrap}
.rp-bars small{font-size:12px;color:var(--mute)}
.rank{list-style:none;padding:0;margin:0}
.rank li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:11px 0;border-bottom:1px solid var(--line2);color:var(--ink);font-size:14px}
.rank li:last-child{border-bottom:0}
.rank small{color:var(--soft);font-size:12.5px;margin-left:4px}
.rank b{font-weight:500;white-space:nowrap}
.rank b.neg{color:var(--err)}
.sec-title small{font-weight:400;color:var(--mute);font-size:13px;margin-left:6px}
@media (max-width:1100px){.kpis4{grid-template-columns:repeat(2,minmax(0,1fr))}.rp-cols{grid-template-columns:minmax(0,1fr)}}
@media (max-width:900px){
  .adm-collapsed .app.adm{grid-template-columns:minmax(0,1fr)}
  .app.adm .side{padding:12px 16px;overflow:visible}
  .app.adm .main{padding:24px 16px 48px}
  .adm-brand{padding:0 0 10px}
  .adm-brand [data-adm-collapse],.adm-switch,.adm-lb,.adm-me{display:none}
  .adm-collapsed .app.adm .side nav a span{display:inline}
  .adm-collapsed .app.adm .side nav a{padding:0 10px}
}
@media (max-width:560px){.kpis4{gap:10px}.kpi{padding:14px}.kpi b{font-size:19px}.rp-bars{gap:6px}.rp-bars span{display:none}}
@media (max-width:900px){
  .side-back{padding:0 0 8px}
  .side-site{flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:0 0 10px;padding:10px 12px}
  .side-site .badge{margin-top:0}
}

/* ---------- Cài đặt website (manage/{id}/settings) ---------- */
.st-grid{display:grid;grid-template-columns:200px minmax(0,1fr);gap:28px;align-items:start}
.st-nav{position:sticky;top:24px;display:flex;flex-direction:column;gap:2px}
.st-nav a{display:flex;align-items:center;gap:10px;height:36px;padding:0 10px;border-radius:8px;font-size:14px;color:var(--mute)}
.st-nav a:hover{color:var(--ink);background:rgba(24,24,27,.04)}
.st-nav a.on{color:var(--ink);background:rgba(24,24,27,.06);font-weight:500}
.st-main{min-width:0}
.st-main>.panel{scroll-margin-top:20px}
.st-sub{font-size:13px;color:var(--mute);margin-top:3px}
.in.ta{height:auto;padding:10px 14px;line-height:1.55;resize:vertical}
.st-foot{display:flex;align-items:center;justify-content:flex-end;gap:14px;padding:14px 22px;border-top:1px solid var(--line2);background:#fafafa;border-radius:0 0 12px 12px}
.st-msg{font-size:13px;color:#15803d}
.st-msg.err{color:var(--err)}
.st-form.dirty .st-foot{background:#fffbeb}
.f>span .cnt{font-style:normal;font-weight:400;font-size:12px;color:var(--soft);margin-left:6px}
.f>span .cnt.over{color:#b45309}
.serp{border:1px solid var(--line2);border-radius:10px;padding:14px 16px;margin-bottom:18px;background:#fff;font-family:Arial,Helvetica,sans-serif}
.serp small{display:block;font-size:12.5px;color:#4d5156}
.serp b{display:block;font-weight:400;font-size:19px;color:#1a0dab;margin:4px 0 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.serp p{font-size:13.5px;color:#4d5156;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.st-img{display:grid;grid-template-columns:220px minmax(0,1fr);gap:16px;align-items:start}
.st-img .pf-img{aspect-ratio:1200/630}
.st-img small{display:block;font-size:12.5px;color:var(--mute);line-height:1.5}
@media (max-width:980px){
  .st-grid{grid-template-columns:minmax(0,1fr)}
  .st-nav{position:static;flex-direction:row;overflow-x:auto;gap:4px}
  .st-nav a{white-space:nowrap;flex:none}
}
@media (max-width:640px){
  .st-img{grid-template-columns:minmax(0,1fr)}
  .f-2{grid-template-columns:minmax(0,1fr)}
}

/* ---------- Tổng quan website (manage/overview.php, theo prototype Dash.V.overview) ---------- */
.ov-name{font-weight:500;color:var(--ink)}
.badge.brand{color:#c2410c}.badge.brand::before{background:var(--acc)}
.ov-alert{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:14px;margin-bottom:16px;background:#fff7ed;border:1px solid #fed7aa;color:#9a3412}
.ov-alert.bad{background:#fef2f2;border-color:#fecaca;color:#991b1b}
.ov-alert>div{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.ov-alert span{font-size:13.5px}
.ov-alert a:not(.btn){text-decoration:underline;text-underline-offset:2px}
.ov-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;min-width:0}
.ov-card h3{font-size:15px;font-weight:500;color:var(--ink);margin-bottom:14px;display:flex;align-items:center;gap:8px}
.ov-card h3 small{font-weight:400;color:var(--mute);font-size:13px}
.ov-site{display:grid;grid-template-columns:240px minmax(0,1fr) 280px;gap:24px;align-items:center;margin-bottom:16px}
.ov-thumb.site-shot{display:block;aspect-ratio:16/10;border-radius:10px}
.ov-info{display:flex;flex-direction:column;gap:4px;min-width:0}
.ov-nm{display:flex;align-items:center;gap:6px;min-width:0}
.ov-nm b{font-size:18px;font-weight:500;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ov-dom{display:flex;align-items:center;gap:8px;min-width:0}
.ov-dom a{color:var(--mute);font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ov-dom a:hover{color:var(--ink)}
.ov-dom .btn.sm{height:26px;padding:0 10px;font-size:12px}
.ov-tags{display:flex;gap:12px;flex-wrap:wrap;margin:6px 0 2px}
.ov-usage{display:grid;gap:12px;align-content:start}
.ov-usage>div{display:flex;flex-direction:column}
.ov-usage span{font-size:12.5px;color:var(--mute)}
.ov-usage small{font-size:12px;color:var(--mute)}
.ov-usage .btn{justify-self:start}
.u-bar{height:6px;border-radius:99px;background:#eeeef0;overflow:hidden;margin:6px 0 4px}
.u-bar i{display:block;height:100%;background:var(--ink);border-radius:99px}
.u-bar.warm i{background:var(--warn)}.u-bar.hot i{background:var(--err)}
.ov-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:16px}
.ov-kpi{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px;display:flex;flex-direction:column;gap:2px;color:inherit;transition:border-color .15s}
a.ov-kpi:hover{border-color:#cfd2d8}
.ov-kpi span{color:var(--acc);margin-bottom:10px}
.ov-kpi small{color:var(--mute)}
.ov-kpi b{font-size:24px;font-weight:500;color:var(--ink);letter-spacing:-.02em}
.ov-two{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:16px;margin-bottom:16px}
.ov-bars{display:flex;align-items:flex-end;gap:10px;height:190px;padding-top:10px}
.ov-bars div{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.ov-bars i{display:block;width:100%;max-width:36px;background:var(--ink);border-radius:6px 6px 2px 2px}
.ov-bars div:hover i{background:var(--acc)}
.ov-bars em{font-style:normal;font-size:11px;color:var(--mute);line-height:1}
.ov-bars small{color:var(--mute);font-size:12px}
.ov-note{margin-top:12px;font-size:13px;color:var(--mute)}
.ov-todo{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px}
.ov-todo li{display:flex;align-items:center;gap:10px}
.ov-todo li>span{width:20px;height:20px;border-radius:50%;border:1.5px solid #d4d4d8;display:grid;place-items:center;flex:none}
.ov-todo li.ok>span{background:var(--ok);border-color:var(--ok);color:#fff}
.ov-todo li a{color:var(--ink)}
.ov-todo li a:hover{color:var(--acc)}
.ov-todo li em{font-style:normal;color:var(--mute)}
.ov-todo li.ok a{color:var(--mute);text-decoration:line-through}
.h3-link{margin-left:auto;font-size:13px;font-weight:400;color:var(--mute)}
.h3-link:hover{color:var(--ink)}
.ov-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line2);color:inherit}
.ov-card h3+.ov-row{border-top:none;padding-top:0}
.ov-row img,.ov-noimg{width:48px;height:36px;border-radius:6px;object-fit:cover;flex:none;background:var(--bg2)}
.ov-noimg{display:grid;place-items:center;color:var(--soft)}
.ov-row>div{flex:1;min-width:0;display:flex;flex-direction:column}
.ov-row b{font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ov-row:hover b{color:var(--acc)}
.ov-row small{color:var(--mute);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ov-acts{display:grid;gap:8px}
.ov-acts a{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line2);border-radius:10px;color:var(--ink);transition:border-color .15s,background .15s}
.ov-acts a:hover{border-color:#cfd2d8;background:var(--bg)}
.ov-acts .ic{color:var(--mute)}
.ov-acts span{display:flex;flex-direction:column;min-width:0}
.ov-acts b{font-weight:500}
.ov-acts small{color:var(--mute);font-size:12.5px}
@media (max-width:1100px){.ov-site{grid-template-columns:200px minmax(0,1fr)}.ov-usage{grid-column:1/-1;grid-template-columns:1fr 1fr;align-items:end}.ov-kpis{grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){.ov-two{grid-template-columns:minmax(0,1fr)}}
@media (max-width:600px){
  .ov-site{grid-template-columns:minmax(0,1fr);gap:16px;padding:16px}
  .ov-usage{grid-template-columns:1fr}
  .ov-card{padding:16px}
  .ov-kpis{gap:10px}
  .ov-kpi{padding:14px}
  .ov-kpi b{font-size:20px}
  .ov-bars{gap:4px;height:160px}
  .ov-bars em{display:none}
  .ov-alert{flex-wrap:wrap}
}

/* ---------- Thống kê truy cập (manage/stats.php), dùng chung .ov-* ---------- */
.st-seg{display:inline-flex;gap:2px;padding:3px;background:var(--bg2);border-radius:99px}
.st-seg a{height:34px;padding:0 14px;display:inline-flex;align-items:center;border-radius:99px;font-size:13.5px;color:var(--mute);white-space:nowrap}
.st-seg a:hover{color:var(--ink)}
.st-seg a.on{background:#fff;color:var(--ink);font-weight:500;box-shadow:0 1px 2px rgba(24,24,27,.08)}
.st-chg{font-style:normal;font-size:12.5px;color:var(--mute);margin-top:2px}
.st-chg.up{color:var(--ok)}.st-chg.down{color:var(--err)}
.st-chart{margin-bottom:16px}
.st-legend{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:400;color:var(--mute)}
.st-legend i{width:10px;height:10px;border-radius:3px;background:var(--ink);display:inline-block}
.st-legend i.c{background:var(--acc);margin-left:8px}
.st-bars{height:220px}
.st-bars i{position:relative;display:flex;align-items:flex-end}
.st-bars u{display:block;width:100%;background:var(--acc);border-radius:4px 4px 2px 2px}
.st-bars small{white-space:nowrap;font-size:11.5px}
.st-bars.dense{gap:2px}
.st-bars.dense i{border-radius:3px 3px 1px 1px}
.st-row{padding:7px 0}
.st-row-t{display:flex;align-items:baseline;gap:12px;min-width:0}
.st-row-t a,.st-row-t span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.st-row-t a:hover{color:var(--acc)}
.st-row-t b{font-weight:500;color:var(--ink)}
.st-meter{height:6px;border-radius:99px;background:#f1f1f3;margin-top:6px;overflow:hidden}
.st-meter i{display:block;height:100%;background:var(--ink);border-radius:99px}
.st-meter.acc i{background:var(--acc)}
.st-sub{margin:18px 0 6px;font-size:13px;font-weight:500;color:var(--mute)}
.st-line{display:flex;gap:12px;padding:6px 0;border-top:1px solid var(--line2);font-size:13.5px}
.st-line a,.st-line span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.st-line b{font-weight:500}
.st-tr{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line2)}
.st-tr:first-child{border-top:none;padding-top:0}
.st-dev{width:32px;height:32px;border-radius:8px;background:var(--bg2);display:grid;place-items:center;color:var(--mute);flex:none}
.st-tp{flex:1;min-width:0;display:flex;flex-direction:column}
.st-tp a,.st-tp span{color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-tp a:hover{color:var(--acc)}
.st-tp small{color:var(--soft);font-size:12px}
.st-tr time{font-size:12.5px;color:var(--mute);white-space:nowrap}
@media (max-width:600px){
  .st-seg{width:100%}
  .st-seg a{flex:1;justify-content:center;padding:0 6px}
  .st-legend{display:none}
  .st-bars{height:180px;gap:2px}
  .st-bars em{display:none}
  .st-bars small{font-size:10px}
}

/* Dịch vụ & thanh toán (manage/{id}/billing, app/billing) - theo prototype: bill-cur, plan-grid, cycle, pay-break, pay-bank */
.sec-title{font-size:15px;font-weight:500;color:var(--ink);margin:30px 0 12px}
.bl-cur{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px);gap:28px;align-items:center;padding:22px 24px}
.bl-cur-i{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.bl-cur-i small{color:var(--mute);font-size:13px}
.bl-cur-i>b{font-size:26px;font-weight:500;letter-spacing:-.02em;color:var(--ink);line-height:1.2}
.bl-cur-i .muted{font-size:13.5px}
.bl-cur-a{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.bl-cur-a p{font-size:13.5px;margin:0}
.bl-plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.bl-plan{position:relative;background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:8px}
.bl-plan.hot{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.bl-tag{position:absolute;top:-11px;left:22px;background:var(--ink);color:#fff;font-size:12px;padding:2px 12px;border-radius:99px}
.bl-plan>b{font-size:17px;font-weight:600;color:var(--ink)}
.bl-price{font-size:30px;font-weight:500;letter-spacing:-.03em;color:var(--ink)}
.bl-price small{font-size:13.5px;font-weight:400;letter-spacing:0;color:var(--mute);margin-left:2px}
.bl-plan ul{list-style:none;padding:0;margin:6px 0 14px;display:grid;gap:9px;flex:1;align-content:start;font-size:13.5px}
.bl-plan li{display:flex;gap:8px;align-items:flex-start}
.bl-plan li .ic{color:var(--acc);flex:none;margin-top:1px}
.bl-plan .btn[disabled]{opacity:.55;cursor:not-allowed}
.bl-fine{font-size:12.5px;margin-top:12px}
.bl-pay{border-color:#fed7aa;box-shadow:0 0 0 3px var(--acc-50)}
.bl-pay-b{display:grid;grid-template-columns:220px minmax(0,1fr);gap:26px;align-items:start}
.bl-qr{margin:0;text-align:center}
.bl-qr img{display:block;width:220px;height:auto;aspect-ratio:1;border-radius:12px;border:1px solid var(--line);background:var(--bg2);object-fit:contain}
.bl-qr figcaption{font-size:12px;color:var(--mute);margin-top:8px}
.bl-desc{font-weight:500;color:var(--ink);margin:0 0 10px}
.bl-kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:9px 18px;margin:0 0 14px;padding:14px 16px;background:var(--bg2);border-radius:12px;font-size:14px}
.bl-kv dt{color:var(--mute)}
.bl-kv dd{margin:0;display:flex;align-items:center;gap:6px;color:var(--ink);min-width:0;overflow-wrap:anywhere}
.bl-kv b{font-weight:600}
.bl-amt{font-size:17px}
.bl-code{letter-spacing:.04em;color:#c2410c}
.bl-copy{border:0;background:none;color:var(--mute);cursor:pointer;padding:3px;border-radius:6px;display:inline-grid;place-items:center}
.bl-copy:hover{background:#fff;color:var(--ink)}
.bl-note{display:flex;gap:8px;font-size:13px;color:var(--txt);margin:0 0 14px}
.bl-note .ic{flex:none;margin-top:2px;color:var(--acc)}
.bl-dlg{width:min(480px,100%);max-height:calc(100vh - 40px);overflow:auto}
.bl-cycles{display:grid;gap:8px;margin-bottom:14px}
.bl-cycle{display:flex;align-items:center;gap:12px;padding:11px 14px;border:1px solid var(--line);border-radius:12px;cursor:pointer}
.bl-cycle:has(input:checked){border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.bl-cycle input{accent-color:var(--ink);margin:0}
.bl-cycle>span{flex:1;min-width:0}
.bl-cycle b{display:block;font-weight:500;color:var(--ink);font-size:14px}
.bl-cycle small{display:block;color:var(--mute);font-size:12.5px}
.bl-cycle em{font-style:normal;font-weight:500;color:var(--ink);font-size:14px;white-space:nowrap}
.bl-break{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 16px;padding:14px 16px;background:var(--bg2);border-radius:12px;font-size:13.5px;min-height:88px;align-content:start;transition:opacity .15s}
.bl-break.busy{opacity:.55}
.bl-break b{text-align:right;font-weight:500;color:var(--ink);white-space:nowrap}
.bl-break .t{font-weight:600;font-size:16px;color:var(--ink);padding-top:8px;border-top:1px dashed var(--line)}
.bl-break .d{color:var(--mute);font-size:13px}
.bl-break b.d{color:var(--ink)}
.bl-err{grid-column:1/-1;color:#b91c1c}
.bl-pend{display:flex;align-items:center;gap:14px;padding:14px 18px;border:1px solid #fed7aa;background:var(--acc-50);border-radius:12px;margin-bottom:10px}
.bl-pend>div{flex:1;min-width:0}
.bl-pend b{color:var(--ink);font-weight:500}
.bl-pend small{display:block;color:var(--txt);font-size:13px}
@media (max-width:900px){
  .bl-cur{grid-template-columns:1fr;gap:16px}
  .bl-pay-b{grid-template-columns:1fr;justify-items:center}
  .bl-bank{width:100%}
}
@media (max-width:600px){
  .bl-orders thead{display:none}
  .bl-orders tr{display:block;padding:12px 16px;border-bottom:1px solid var(--line2)}
  .bl-orders tr:last-child{border-bottom:0}
  .bl-orders td,.bl-orders td:nth-child(3){display:flex;justify-content:space-between;gap:12px;padding:3px 0;border:0;text-align:right!important}
  .bl-orders td::before{content:attr(data-l);color:var(--mute);font-size:12.5px;text-align:left;flex:none}
  .bl-orders td small{display:none}
  .bl-pend{flex-wrap:wrap}
  .bl-pend>div{flex-basis:calc(100% - 32px)}
  .bl-pend .btn{width:100%}
  .bl-kv{grid-template-columns:1fr;gap:2px}
  .bl-kv dd{margin-bottom:8px}
}

/* ---------- AI Agent (manage/{id}/ai, theo prototype #/app/ai) ---------- */
.ai-credit{display:flex;align-items:center;gap:10px;background:#fff;border-radius:99px;padding:8px 16px;border:1px solid var(--line);font-size:13px}
.ai-credit small{color:var(--mute)}
.ai-credit .bar{width:110px;height:6px;border-radius:99px;background:var(--bg2);overflow:hidden}
.ai-credit .bar i{display:block;height:100%;background:var(--acc);border-radius:99px;transition:width .4s}
.ai-credit b{font-weight:600;color:var(--ink)}
.agent-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:20px}
.agent{position:relative;background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:4px;font:inherit;color:inherit;transition:border-color .15s,box-shadow .15s}
.agent:hover{border-color:var(--acc)}
.agent.on{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc)}
.agent-ic{width:44px;height:44px;border-radius:50%;background:var(--acc-50);color:var(--acc);display:grid;place-items:center;margin-bottom:10px}
.agent b{color:var(--ink);font-weight:600;font-size:15px}
.agent small{color:var(--mute);font-size:13px;line-height:1.45}
.agent.locked .agent-ic,.agent.locked b,.agent.locked small{opacity:.55}
.agent-lock{position:absolute;top:14px;right:14px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--bg2);color:var(--ink)}
.agent-need,.agent-free{font-style:normal;font-size:11.5px;font-weight:500;color:#c2410c;margin-top:6px}
.agent-free{color:var(--mute)}
.ai-sub{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.ai-sub[hidden]{display:none}
.ai-sub .seg-links{max-width:100%;overflow-x:auto;scrollbar-width:none}.ai-sub .seg-links a{white-space:nowrap;flex:none}
.ai-count{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:var(--acc);color:#fff;font-size:11px;font-weight:600;margin-left:6px}
.ai-count[hidden]{display:none}
.ai-pack{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--mute)}
.ai-pack .ic{color:var(--acc)}
.ai-pack b{color:var(--ink);font-weight:500}
.ai-loading{padding:60px 0;text-align:center;color:var(--mute)}
.ai-cols{display:grid;grid-template-columns:380px minmax(0,1fr);gap:24px;align-items:start}
.ai-form h3,.ai-how h3,.ai-h3{font-size:16px;font-weight:500;color:var(--ink);margin-bottom:16px}
.ai-h3{margin:26px 0 12px}
.ai-form .btn.block{width:100%}
.ai-small{font-size:12.5px;margin-top:12px}
.ai-how{padding:6px 4px}
.ai-steps{list-style:none;counter-reset:s;padding:0;margin:0 0 18px;display:flex;flex-direction:column;gap:16px}
.ai-steps li{counter-increment:s;position:relative;padding-left:44px;display:flex;flex-direction:column;gap:2px}
.ai-steps li::before{content:counter(s);position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%;background:var(--acc-50);color:var(--acc);font-weight:600;display:grid;place-items:center}
.ai-steps b{font-weight:500;color:var(--ink)}
.ai-steps span{color:var(--mute);font-size:13.5px;line-height:1.5}
.ai-note{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:12px;background:var(--acc-50);font-size:13.5px;color:var(--txt)}
.ai-note .ic{color:var(--acc);flex:none;margin-top:2px}
.ai-res{min-height:360px;padding:22px}
.ai-cols>.panel+.panel{margin-top:0}
.ai-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;color:var(--mute);min-height:300px;padding:30px 20px}
.ai-empty .ic{color:var(--acc)}
.ai-empty h3{color:var(--ink);font-weight:500;font-size:18px}
.ai-empty p{max-width:460px;line-height:1.55}
.ai-empty.small{min-height:0;padding:28px 20px}
.ai-spin{width:22px;height:22px;border-radius:50%;border:2.5px solid var(--acc-50);border-top-color:var(--acc);animation:aiSpin .8s linear infinite;display:inline-block}
.ai-spin.sm{width:11px;height:11px;border-width:2px;margin-right:2px;vertical-align:-1px}
@keyframes aiSpin{to{transform:rotate(360deg)}}
.ai-acts{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;margin-top:16px}
.ai-alert{align-items:center}
.ai-alert .ic{flex:none}
/* chưa thuê gói */
.ai-hire{padding:36px 28px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px}
.ai-hire h2{font-size:20px;font-weight:500;color:var(--ink);letter-spacing:-.02em}
.ai-hire>p{max-width:640px;color:var(--mute);line-height:1.6}
.upsell-ic{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--acc-50);color:var(--acc)}
.ai-tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;width:100%;max-width:860px;margin:14px 0 8px;text-align:left}
.ai-tier{border:1px solid var(--line);border-radius:14px;padding:18px}
.ai-tier>b{font-weight:600;color:var(--ink)}
.ai-tier-n{display:block;font-size:28px;font-weight:600;color:var(--ink);margin:6px 0 10px;letter-spacing:-.02em}
.ai-tier-n small{font-size:13px;font-weight:400;color:var(--mute)}
.ai-tier ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:7px;font-size:13px;color:var(--txt)}
.ai-tier li{display:flex;gap:7px;align-items:flex-start}
.ai-tier li .ic{color:var(--ok);flex:none;margin-top:2px}
.ai-hire-cta{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:6px;font-size:13px}
/* SEO */
.seo-top{display:flex;gap:18px;align-items:center;margin-bottom:16px}
.seo-top h3{font-size:16px;font-weight:500;color:var(--ink)}
.seo-score{--v:0;--c:var(--err);width:84px;height:84px;border-radius:50%;flex:none;display:grid;place-content:center;text-align:center;
  background:radial-gradient(closest-side,#fff 78%,transparent 80%),conic-gradient(var(--c) calc(var(--v)*1%),var(--bg2) 0)}
.seo-score.ok{--c:var(--ok)}.seo-score.warn{--c:var(--warn)}
.seo-score b{font-size:24px;font-weight:600;color:var(--ink);line-height:1}
.seo-score small{font-size:11px;color:var(--mute)}
.seo-checks{list-style:none;padding:0;margin:0 0 18px;display:grid;grid-template-columns:1fr 1fr;gap:6px 16px;font-size:13px}
.seo-checks li{display:flex;gap:7px;align-items:flex-start;line-height:1.45}
.seo-checks li .ic{flex:none;margin-top:2px}
.seo-checks li.ok .ic{color:var(--ok)}
.seo-checks li.no .ic{color:var(--err)}
.seo-checks small{display:block;color:var(--mute);font-size:11.5px}
.seo-row{border-top:1px solid var(--line2);padding:14px 0 4px}
.seo-row-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:13.5px}
.seo-row-h b{font-weight:500;color:var(--ink)}
.seo-row-h label{display:flex;gap:6px;align-items:center;color:var(--mute);font-size:13px;cursor:pointer}
.seo-row-h input{accent-color:var(--acc)}
.seo-old{font-size:13px;color:var(--mute);margin-bottom:8px;line-height:1.5}
.seo-old small,.seo-new small{display:flex;justify-content:space-between;font-size:11.5px;color:var(--soft);margin-bottom:3px;text-transform:uppercase;letter-spacing:.04em}
.seo-new em{font-style:normal;text-transform:none;letter-spacing:0}
.seo-new textarea.in{height:auto;padding:9px 12px;font-size:13.5px;line-height:1.5;resize:vertical;background:var(--acc-50);border-color:#fed7aa}
/* mạng xã hội */
.ai-strip .panel-b{display:flex;flex-direction:column;gap:10px;padding:18px 22px}
.ai-strip b{font-weight:500;color:var(--ink)}
.ai-row{display:flex;gap:10px}
.ai-row .in{flex:1;min-width:0}
.ai-strip small{font-size:12.5px}
.so-card{margin-top:14px;padding:18px 22px}
.so-h{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:12px}
.so-h b{display:block;font-weight:500;color:var(--ink)}
.so-h small{color:var(--mute);font-size:12.5px}
.so-none{display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--mute);font-size:13.5px}
.so-ch{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.so-ch-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;font-size:13.5px}
.so-ch-h b{font-weight:500;color:var(--ink)}
.so-c textarea.in{height:auto;padding:10px 12px;font-size:13.5px;line-height:1.55;resize:vertical;background:var(--bg2);border-color:transparent}
.so-acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.so-foot{display:flex;justify-content:flex-end;margin-top:10px}
/* lịch nội dung */
.ai-toolbar{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.ai-toolbar b{display:block;font-weight:500;color:var(--ink);font-size:16px}
.ai-toolbar small{font-size:13px}
.ai-toolbar .btns{display:flex;gap:8px;flex-wrap:wrap}
.pl-week{margin-bottom:18px}
.pl-week h4{font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin:0 0 8px 2px}
.pl-row{display:flex;align-items:center;gap:16px;padding:12px 14px 12px 18px;border-top:1px solid var(--line2)}
.pl-row:first-child{border-top:0}
.pl-date{width:52px;flex:none;display:flex;flex-direction:column;align-items:center;line-height:1.25}
.pl-date b{font-weight:600;color:var(--ink);font-size:15px}
.pl-date small{color:var(--mute);font-size:11.5px}
.pl-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pl-main b{font-weight:500;color:var(--ink);overflow:hidden;text-overflow:ellipsis}
.pl-main small{color:var(--mute);font-size:12.5px}
.pl-err{color:var(--err)!important}
.pl-row.st-skip .pl-main b{text-decoration:line-through;color:var(--soft)}
.ai-menu{position:fixed;z-index:80;background:#fff;border-radius:12px;padding:6px;min-width:230px;display:flex;flex-direction:column;box-shadow:var(--shadow)}
.ai-menu button{border:0;background:none;text-align:left;padding:9px 10px;border-radius:8px;cursor:pointer;font:inherit;font-size:14px;color:var(--ink)}
.ai-menu button:hover{background:var(--acc-50)}
.ai-menu button.danger{color:var(--err)}
.ai-dlg{width:min(480px,100%)}
.ai-dlg .f{margin-bottom:14px}
/* chờ duyệt */
.rv-card{padding:18px 22px;margin-bottom:12px}
.rv-main{display:flex;gap:16px}
.rv-img{width:120px;height:80px;border-radius:10px;background:var(--bg2) center/cover;flex:none}
.rv-body{flex:1;min-width:0}
.rv-h{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:4px}
.rv-h b{font-weight:500;color:var(--ink);font-size:15.5px}
.rv-body>small{font-size:12.5px}
.rv-score.ok{color:var(--ok)}.rv-score.warn{color:var(--warn)}.rv-score.err{color:var(--err)}
.rv-ex{margin-top:8px;color:var(--txt);font-size:13.5px;line-height:1.55}
.rv-iss{list-style:none;padding:0;margin:10px 0 0;display:flex;flex-wrap:wrap;gap:6px}
.rv-iss li{font-size:12px;padding:3px 9px;border-radius:99px;background:#fffbeb;color:#92400e}
.rv-iss li.bad{background:#fef2f2;color:#991b1b}
.rv-card .ai-acts{margin-top:14px}
/* thiết lập */
.ai-setup .panel-b{display:flex;flex-direction:column;gap:4px}
.ai-setup .f>span{display:block;margin-bottom:6px}
.ai-switch{position:relative;width:46px;height:26px;flex:none;cursor:pointer}
.ai-switch input{position:absolute;opacity:0}
.ai-switch span{position:absolute;inset:0;border-radius:99px;background:var(--bg3);transition:background .2s}
.ai-switch span::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .2s}
.ai-switch input:checked+span{background:var(--acc)}
.ai-switch input:checked+span::after{transform:translateX(20px)}
.ai-switch input:focus-visible+span{outline:2px solid var(--ink);outline-offset:2px}
.ai-radios{display:flex;flex-wrap:wrap;gap:8px}
.ai-radio{cursor:pointer}
.ai-radio input,.ai-days input{position:absolute;opacity:0;pointer-events:none}
.ai-radio span,.ai-days span{display:inline-flex;align-items:center;height:36px;padding:0 14px;border:1px solid var(--line);border-radius:99px;font-size:13.5px;color:var(--txt);background:#fff;transition:all .15s}
.ai-radio input:checked+span,.ai-days input:checked+span{border-color:var(--acc);background:var(--acc-50);color:#9a3412}
.ai-radio input:focus-visible+span,.ai-days input:focus-visible+span{outline:2px solid var(--ink);outline-offset:2px}
.ai-days{display:flex;gap:6px;flex-wrap:wrap}
.ai-days label{cursor:pointer}
.ai-days span{width:46px;justify-content:center;padding:0}
.ai-checks{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:13.5px}
.ai-checks label{display:flex;gap:7px;align-items:center;cursor:pointer}
.ai-checks input{accent-color:var(--acc)}
/* kết quả */
.ai-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
.ai-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);margin-bottom:16px}
.ai-list ol{list-style:none;margin:0;padding:6px 0}
.ai-list li{display:flex;gap:10px;align-items:center;padding:10px 22px;font-size:13.5px}
.ai-list li+li{border-top:1px solid var(--line2)}
.ai-list li a,.ai-list li>span:not(.tag-ai){flex:1;min-width:0;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ai-list li a:hover{color:var(--acc)}
.ai-list li b{font-weight:500;white-space:nowrap;color:var(--txt)}
.ai-pad{padding:16px 22px}
.tag-ai{font-size:10.5px;font-weight:600;padding:2px 6px;border-radius:5px;background:var(--acc-50);color:var(--acc)}
@media (max-width:1100px){.agent-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ai-cols{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){
  .ai-tiers,.so-ch,.ai-grid,.ai-kpis,.seo-checks{grid-template-columns:minmax(0,1fr)}
  .agent{padding:14px}.agent-ic{width:36px;height:36px;margin-bottom:6px}.agent small{display:none}
  .pl-row{gap:10px;padding:12px}.pl-row .badge{display:none}
  .rv-img{display:none}
  .ai-row{flex-direction:column}
}
/* mua AI (trang AI Agent): nút Mua thêm credit, giá gói, gia hạn */
.ai-credit .ai-buy{border:0;background:var(--acc-50);color:var(--acc);font:inherit;font-size:12px;font-weight:600;padding:4px 10px;border-radius:99px;cursor:pointer;white-space:nowrap}
.ai-credit .ai-buy:hover{background:var(--acc);color:#fff}
.ai-tier-p{display:block;font-size:15px;font-weight:600;color:var(--ink);margin:-4px 0 10px}
.ai-tier-p small{font-size:12px;font-weight:400;color:var(--mute)}
.ai-tier .btn.block{margin-top:12px}
.ai-pack button.link{border:0;background:none;padding:0;font:inherit;font-weight:600;color:var(--acc);cursor:pointer;margin-left:8px}
.ai-alert{margin:0 0 14px}
.ai-pack button.link{white-space:nowrap}

/* ---------- Admin: mẫu riêng của đại lý (admin/themes) ---------- */
.btn.sm{height:32px;padding:0 12px;gap:6px;font-size:13px}
.th-table td{vertical-align:middle}
.th-cell{display:flex;align-items:center;gap:12px;min-width:0}
.th-cell>span{display:flex;flex-direction:column;min-width:0}
.th-thumb{width:84px;height:56px;object-fit:cover;object-position:top;border-radius:8px;border:1px solid var(--line2);background:var(--bg2);flex:none}
.th-acts{text-align:right;white-space:nowrap}
.th-acts .btn+.btn{margin-left:4px}
@media (max-width:760px){.th-acts{width:100%;text-align:left;white-space:normal}.th-acts .btn{margin:4px 4px 0 0}}

/* Ví & nạp tiền (app/wallet) + dải số dư ở Dịch vụ & thanh toán khi trả bằng ví (W3site) */
.wl-top{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:16px;align-items:start}
.wl-top>.panel{margin:0}
.wl-bal{padding:22px 24px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.wl-bal small{color:var(--mute);font-size:13px}
.wl-bal>b{font-size:30px;font-weight:500;letter-spacing:-.03em;color:var(--ink);line-height:1.15}
.wl-bal .badge{display:inline-flex;gap:5px;align-items:center}
.wl-amt{max-width:340px;margin-bottom:0}
.wl-amt .in{font-size:17px;font-weight:500}
.wl-chips{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 18px}
.wl-chip{border:1px solid var(--line);background:#fff;border-radius:99px;padding:6px 14px;font-size:13.5px;cursor:pointer;color:var(--ink)}
.wl-chip:hover{border-color:var(--ink)}
.wl-act{display:flex;gap:8px;flex-wrap:wrap}
.wl-in{color:#15803d;font-weight:500}
.wl-out{color:var(--ink)}
.bl-wallet{display:flex;align-items:center;gap:16px;padding:16px 20px;margin-bottom:16px;flex-wrap:wrap}
.bl-wallet-ic{width:42px;height:42px;border-radius:12px;background:var(--acc-50);color:var(--acc);display:grid;place-items:center;flex:none}
.bl-wallet>div{display:flex;flex-direction:column;gap:2px;min-width:140px}
.bl-wallet small{color:var(--mute);font-size:12.5px}
.bl-wallet>div>b{font-size:20px;font-weight:600;color:var(--ink)}
.bl-wallet>div .muted{font-size:12.5px}
.bl-wallet>p{flex:1;margin:0;font-size:13.5px;min-width:180px}
@media (max-width:900px){
  .wl-top{grid-template-columns:1fr}
}
.bl-break b.bl-low{color:#b91c1c}

/* Đồng bộ Hodine Business (manage/business.php) */
.bz-intro{display:flex;gap:28px;align-items:center;padding:26px 28px;margin-bottom:18px;background:linear-gradient(135deg,#fff,var(--acc-50))}
.bz-txt{flex:1;min-width:0}
.bz-tag{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--acc);background:#fff;border:1px solid #fed7aa;border-radius:99px;padding:3px 10px;margin-bottom:10px}
.bz-txt h2{font-size:20px;font-weight:600;color:var(--ink);margin:0 0 8px}
.bz-txt p{margin:0 0 12px;max-width:720px}
.bz-txt ul{list-style:none;padding:0;margin:0;display:grid;gap:7px;font-size:14px}
.bz-txt li{display:flex;gap:8px;align-items:center}
.bz-txt li .ic{color:var(--acc)}
.bz-side{width:110px;height:110px;border-radius:24px;background:#fff;display:grid;place-items:center;color:var(--acc);flex:none;box-shadow:var(--shadow)}
.bz-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;align-items:start}
.bz-grid>.panel{margin:0}
.bz-list{display:grid;gap:8px;margin:0 0 16px}
.bz-note{font-size:13px;margin:0 0 12px}
@media (max-width:700px){.bz-side{display:none}.bz-intro{padding:20px}}

/* Sản phẩm, liên hệ, thành viên */
.pr-cover{background-color:var(--bg2)}
.pr-price{color:var(--ink);font-weight:600}
.pl-meta s{color:var(--mute);font-size:12.5px}
.pd-back{display:inline-flex;align-items:center;gap:4px;font-size:13px;margin-bottom:6px}
.pd{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start}
.pd .panel{margin:0 0 16px}
.pd textarea.in{resize:vertical;min-height:80px;font-family:inherit}
.pd-imgs{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px}
.pd-img{position:relative;aspect-ratio:1;border-radius:12px;border:1px solid var(--line);background:var(--bg2) center/cover no-repeat;overflow:hidden}
.pd-main-tag{position:absolute;left:8px;top:8px;background:#18181b;color:#fff;opacity:1;font-size:11px;padding:2px 8px;border-radius:99px}
.pd-img-x{position:absolute;right:6px;top:6px;width:26px;height:26px;border-radius:50%;border:0;background:rgba(0,0,0,.6);color:#fff;cursor:pointer;font-size:12px}
.pd-img-first{position:absolute;left:6px;right:6px;bottom:6px;border:0;border-radius:8px;background:rgba(255,255,255,.92);font-size:12px;padding:5px;cursor:pointer;opacity:0;transition:opacity .15s}
.pd-img:hover .pd-img-first,.pd-img-first:focus{opacity:1}
.pd-up{display:grid;place-items:center;font-size:12.5px;color:var(--mute);text-align:center;padding:8px}
.pd-add{aspect-ratio:1;border-radius:12px;border:1.5px dashed var(--line);background:#fff;cursor:pointer;font-size:28px;color:var(--mute);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.pd-add small{font-size:12.5px}
.pd-add:hover{border-color:var(--ink);color:var(--ink)}
@media (max-width:900px){.pd{grid-template-columns:1fr}}
.pc-link{font-size:12.5px;margin-left:12px}
.ct-row{display:flex;gap:16px;align-items:flex-start;padding:16px 20px;border-bottom:1px solid var(--line2)}
.ct-row:last-child{border-bottom:0}
.ct-who{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.ct-who>b{color:var(--ink);font-weight:600}
.ct-links{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13.5px}
.ct-links a,.ct-links span{display:inline-flex;gap:5px;align-items:center;color:var(--txt)}
.ct-links a:hover{color:var(--ink)}
.ct-msg{margin:4px 0 2px;padding:10px 12px;background:var(--bg2);border-radius:10px;font-size:14px;color:var(--ink);overflow-wrap:anywhere}
.ct-row .pl-acts{display:flex;gap:6px;align-items:center;flex:none}
@media (max-width:640px){.ct-row{flex-direction:column}}
.mb-add .in[type=email]{max-width:none}
.mb-add select.in{flex:0 0 190px}
.mb-table td b{display:block;color:var(--ink);font-weight:500}
.mb-mail{display:block;font-size:12.5px}
.mb-roles{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:16px}
.mb-roles>div{display:flex;flex-direction:column;gap:3px;font-size:13px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#fff}
.mb-roles b{color:var(--ink);font-weight:600}
@media (max-width:640px){.mb-add{flex-wrap:wrap}.mb-add select.in{flex:1 1 100%}}

/* Thư viện ảnh của website (manage/media.php) */
.md{padding:18px 20px}
.md-drop{display:flex;gap:10px;align-items:center;justify-content:center;padding:18px;border:1.5px dashed var(--line);border-radius:12px;color:var(--mute);font-size:13.5px;margin-bottom:16px;text-align:center;transition:border-color .15s,background .15s}
.md-drop.on{border-color:var(--ink);background:var(--bg2);color:var(--ink)}
.md-drop .link{background:none;border:0;padding:0;font:inherit;cursor:pointer}
.md-status{font-size:13px;color:var(--ink);margin:-6px 0 12px}
.md-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
.md-item{position:relative;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;transition:box-shadow .15s,border-color .15s}
.md-item.on{border-color:var(--ink);box-shadow:0 0 0 2px var(--ink)}
.md-img{display:block;aspect-ratio:4/3;background:var(--bg2)}
.md-img img{width:100%;height:100%;object-fit:cover;display:block}
.md-pick{position:absolute;left:8px;top:8px;width:26px;height:26px;border-radius:8px;background:rgba(255,255,255,.92);display:grid;place-items:center;cursor:pointer;z-index:1;opacity:0;transition:opacity .15s}
.md-item:hover .md-pick,.md-item.on .md-pick,.md-pick:focus-within{opacity:1}
.md-pick input{accent-color:var(--ink);width:16px;height:16px;margin:0;cursor:pointer}
.md-cap{display:flex;align-items:center;gap:4px;padding:6px 6px 6px 10px;font-size:12.5px;color:var(--txt)}
.md-cap span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (hover:none){.md-pick{opacity:1}}
@media (max-width:600px){.md{padding:14px}.md-grid{grid-template-columns:repeat(2,1fr);gap:10px}}

/* Sidebar ứng dụng / quản trị website: menu dài thì cuộn trong khung, không tràn khuất (màn hình máy tính) */
@media (min-width:901px){
  .app:not(.adm) .side{overflow:hidden}
  .app:not(.adm) .side nav{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;margin:0 -4px;padding:0 4px}
  .app:not(.adm) .side nav a{flex:none}
  .app:not(.adm) .side-help{flex:none;margin-top:12px}
  .app:not(.adm) .side-user{flex:none}
}
@media (min-width:901px) and (max-height:820px){
  .app:not(.adm) .side-help{display:none}
  .app:not(.adm) .side .logo{padding-bottom:12px}
  .app:not(.adm) .side nav a{height:34px}
}
@media (min-width:901px) and (max-height:1000px){
  .app:not(.adm) .side-help{padding:10px 12px}
  .app:not(.adm) .side-help-tx{display:none}
  .app:not(.adm) .side-help a{margin-top:4px}
  .app:not(.adm) .side nav a{height:34px}
  .app:not(.adm) .side-user{padding-top:10px;margin-top:10px}
}
/* Nhóm Thành viên trong Cài đặt website */
.st-mb .mb-roles{margin:0;padding:16px 22px 20px;border-top:1px solid var(--line2)}
.st-mb{margin-top:20px}
.st-main .panel-h .st-sub{margin:3px 0 0;font-weight:400}
.seg-links a small{margin-left:6px;font-size:12px;color:var(--soft);font-weight:500}

/* Hỗ trợ (app/support, admin/tickets) + thông báo (app/notifications) */
.tk-new{margin-bottom:22px}
.tk-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.tk-new-f{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:6px}
.tk-table tr.tk-hl td:first-child{box-shadow:inset 3px 0 0 var(--acc)}
.tk-thread{display:flex;flex-direction:column;gap:16px;max-width:860px}
.tk-msg{display:flex;gap:12px;align-items:flex-start}
.tk-msg.me{flex-direction:row-reverse}
.tk-ava{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--bg2);color:var(--ink);font-weight:600;font-size:13px}
.tk-msg.ag .tk-ava{background:var(--ink);color:#fff}
.tk-bub{max-width:min(640px,85%);background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 16px}
.tk-msg.me .tk-bub{background:var(--acc-50);border-color:transparent}
.tk-meta{display:flex;gap:10px;align-items:baseline;font-size:12.5px;color:var(--mute);margin-bottom:4px;flex-wrap:wrap}
.tk-meta b{color:var(--ink);font-weight:600}
.tk-body{font-size:14.5px;color:var(--txt);overflow-wrap:anywhere}
.tk-reply{padding:16px;margin-top:6px}
.tk-reply .ta{min-height:96px;resize:vertical;padding:12px 14px;height:auto}
.tk-reply-f{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;flex-wrap:wrap}
.tk-closed{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--mute);margin:0 0 10px}
.nt-list{list-style:none;margin:0;padding:0}
.nt{display:flex;gap:14px;padding:16px 20px;border-bottom:1px solid var(--line2)}
.nt:last-child{border-bottom:0}
.nt-ic{flex:none;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--bg2);color:var(--ink)}
.nt.ok .nt-ic{background:#f0fdf4;color:var(--ok)}.nt.warn .nt-ic{background:#fffbeb;color:var(--warn)}.nt.err .nt-ic{background:#fef2f2;color:var(--err)}
.nt-b{flex:1;min-width:0}
.nt-h{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.nt-h b{color:var(--ink);font-weight:600}
.nt-h span{font-size:12.5px;color:var(--soft);white-space:nowrap}
.nt-b p{margin:4px 0 6px;color:var(--txt);font-size:14px}
.nt-a{display:flex;gap:14px;font-size:13px;flex-wrap:wrap}
@media (max-width:700px){.tk-row{grid-template-columns:1fr}.tk-bub{max-width:100%}}
.panel-h .st-sub{margin:3px 0 0;font-weight:400}

/* Cài đặt website: chuyển hướng 301, sao lưu (partials/site_tools.php); kiểm tra SEO (manage/seo_check.php) */
.st-main>.panel+.panel,.st-main>.dm+.panel,.st-main>.panel+.dm{margin-top:20px}
.rd-add{display:grid;grid-template-columns:1fr auto 1fr auto;gap:12px;align-items:end;padding:18px 22px;border-bottom:1px solid var(--line2)}
.rd-add .f{margin:0}
.rd-in{display:flex;align-items:center;border:1px solid var(--line);border-radius:var(--r);background:#fff;overflow:hidden}
.rd-in small{padding:0 0 0 12px;color:var(--soft);font-size:13px;white-space:nowrap;max-width:45%;overflow:hidden;text-overflow:ellipsis}
.rd-in .in{border:0;box-shadow:none!important;padding-left:2px}
.rd-in:focus-within{border-color:var(--ink)}
.rd-arrow{padding-bottom:11px;color:var(--soft);font-size:18px}
.rd-path{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;color:var(--ink);overflow-wrap:anywhere}
.rd-to{font-size:13.5px;overflow-wrap:anywhere}
.rd-empty{padding:18px 22px}
.bk-list{display:flex;flex-direction:column;gap:10px}
.bk-row{display:flex;align-items:center;gap:14px;padding:12px 14px;border:1px solid var(--line2);border-radius:12px}
.bk-ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--bg2);color:var(--ink);flex:none}
.bk-t{flex:1;min-width:0}
.bk-t b{display:block;color:var(--ink);font-weight:500}
.bk-t small{color:var(--mute);font-size:13px}
.bk-note{font-size:13px;margin:4px 0 0}
.sc-head{display:flex;align-items:center;gap:24px;padding:22px 24px;margin-bottom:8px}
.sc-score{--c:var(--err);flex:none;width:104px;height:104px;border-radius:50%;display:grid;place-items:center;align-content:center;background:conic-gradient(var(--c) calc(var(--p)*1%),var(--bg2) 0);position:relative}
.sc-score::before{content:"";position:absolute;inset:9px;border-radius:50%;background:#fff}
.sc-score b,.sc-score small{position:relative;line-height:1}
.sc-score b{font-size:30px;font-weight:600;color:var(--ink)}
.sc-score small{font-size:12px;color:var(--mute);margin-top:2px}
.sc-score.ok{--c:var(--ok)}.sc-score.warn{--c:var(--warn)}
.sc-sum h2{font-size:20px;font-weight:600;color:var(--ink);margin-bottom:4px}
.sc-sum p{margin:2px 0;font-size:14px}
.sc-list{margin-bottom:8px}
.sc-item{display:flex;gap:14px;align-items:flex-start;padding:14px 20px;border-bottom:1px solid var(--line2)}
.sc-item:last-child{border-bottom:0}
.sc-item .badge{flex:none;width:118px;margin-top:2px}
.sc-b{flex:1;min-width:0}
.sc-b b{color:var(--ink);font-weight:500}
.sc-b p{margin:2px 0 0;font-size:13.5px;color:var(--mute)}
.sc-items{margin:8px 0 0;padding-left:18px;font-size:13.5px}
.sc-items li{margin:3px 0}
.sc-item.ok .sc-b b{color:var(--txt)}
@media (max-width:760px){.rd-add{grid-template-columns:1fr}.rd-arrow{display:none}.sc-head{flex-direction:column;align-items:flex-start}.sc-item{flex-wrap:wrap}.sc-item .badge{width:auto}}

/* danh mục bài viết: dịch vụ, mô tả, sửa tại chỗ */
.c-svc{display:inline-block;margin-left:8px;font-size:11.5px;font-weight:600;color:var(--acc);background:var(--acc-50);padding:1px 8px;border-radius:99px;vertical-align:1px}
.c-desc{display:block;font-size:12.5px;margin-top:2px}
.c-edit td{background:var(--bg)}
.c-edit-f{display:grid;gap:10px;padding:6px 0;max-width:720px}
.c-edit-f .f{margin:0}
.c-edit-f .ta{height:auto;padding:10px 14px;resize:vertical}
.c-svc-tg{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;font-size:14px;cursor:pointer}
.c-svc-tg b{font-weight:500;color:var(--ink)}
.c-svc-tg span{font-size:13px}
.c-edit-a{display:flex;gap:8px;justify-content:flex-end}

/* Cài đặt > Chữ trên website */
.wd{display:flex;flex-direction:column;gap:10px}
.wd-g{border:1px solid var(--line2);border-radius:12px}
.wd-g summary{list-style:none;display:flex;align-items:baseline;gap:10px;padding:12px 16px;cursor:pointer;flex-wrap:wrap}
.wd-g summary::-webkit-details-marker{display:none}
.wd-g summary b{font-weight:500;color:var(--ink)}
.wd-g summary span{font-size:13px;flex:1}
.wd-g summary .ic{transform:rotate(-90deg);transition:transform .15s;color:var(--soft)}
.wd-g[open] summary .ic{transform:rotate(90deg)}
.wd-f{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:4px 14px;padding:0 16px 14px}
.wd-f .f{margin:0}
.st-cv{display:inline-block;margin-right:8px;font-weight:500;color:var(--ink)}
/* Thư viện ảnh > Kho ảnh miễn phí */
.mf-topics{display:flex;flex-wrap:wrap;gap:6px;margin:-6px 0 16px}
.mf-topics a{height:32px;display:inline-flex;align-items:center;padding:0 12px;border-radius:99px;background:#fff;border:1px solid var(--line);font-size:13px;color:var(--txt)}
.mf-topics a:hover{border-color:var(--ink)}
.mf-topics a.on{background:var(--ink);border-color:var(--ink);color:#fff}
.mf-note{font-size:13px;margin-top:12px}

/* Đăng nhập thay khách (partials/imp_bar.php): thanh nổi giữa đáy màn hình, mọi khu (kể cả trình sửa) */
.imp-bar{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:2147483000;display:flex;align-items:center;gap:10px;max-width:calc(100vw - 32px);padding:8px 8px 8px 16px;border-radius:999px;background:#c2410c;color:#fff;font-size:13.5px;line-height:1.3;box-shadow:0 10px 30px rgba(194,65,12,.35),0 0 0 3px rgba(255,255,255,.9)}
.imp-bar svg{flex:none}
.imp-bar .imp-tx{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.imp-bar small{opacity:.85;font-size:12.5px;margin-left:4px}
.imp-bar form{margin:0;flex:none}
.imp-bar button{border:0;border-radius:999px;background:#fff;color:#c2410c;font:inherit;font-weight:600;padding:7px 16px;cursor:pointer}
.imp-bar button:hover{background:#ffedd5}
.imp-bar.is-float{left:16px;transform:none}
@media(max-width:640px){.imp-bar small{display:none}}
.imp-log{list-style:none;margin:4px 0 6px;padding:0;display:grid;gap:4px;font-size:13.5px}
.imp-log span{display:inline-block;min-width:44px;color:var(--muted,#6b7280);font-variant-numeric:tabular-nums}

/* Bảng giá đại lý (admin/pricing, assets/js/pricing.js): tab, danh sách gói | sửa | xem trước, bảng thời hạn × gói */
.pr-head{margin-bottom:20px}
.pr-meta{display:flex;align-items:center;gap:14px;font-size:13px}
.pr-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:99px;background:var(--acc-50);color:#c2410c;font-weight:600;font-size:12.5px}
.pr-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:22px}
.pr-stat{padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:#fff;min-width:0}
.pr-stat span{display:block;font-size:12.5px;color:var(--mute);margin-bottom:6px}
.pr-stat b{display:block;font-size:20px;font-weight:600;color:var(--ink);letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums;line-height:1.25}
.pr-stat small{display:block;margin-top:4px;font-size:12px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pr-stat .pr-gain{font-size:20px}
.pr-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:20px;overflow-x:auto;scrollbar-width:none}
.pr-tabs button{display:inline-flex;align-items:center;gap:8px;padding:12px 16px;border:0;background:none;font:inherit;font-size:14px;color:var(--mute);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.pr-tabs button:hover{color:var(--ink)}
.pr-tabs button.on{color:var(--ink);font-weight:600;border-bottom-color:var(--ink)}
.pr-md{display:grid;grid-template-columns:230px minmax(0,1fr) 270px;gap:20px;align-items:start}
.pr-list{display:flex;flex-direction:column;gap:8px}
.pr-li{position:relative;display:flex;flex-direction:column;gap:3px;text-align:left;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;font:inherit;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.pr-li:hover{border-color:#c9ccd2}
.pr-li.on{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.pr-li.bad{border-color:var(--err)}
.pr-li-t{font-weight:600;color:var(--ink);font-size:14.5px}
.pr-li-s{font-size:12.5px;color:var(--mute)}
.pr-li-f{display:flex;align-items:center;gap:8px;margin-top:4px}
.pr-li-f i{font-style:normal;font-size:11px;font-weight:600;color:#c2410c;background:var(--acc-50);padding:2px 8px;border-radius:99px}
.pr-li-st{font-size:11.5px;color:#15803d;display:inline-flex;align-items:center;gap:5px}
.pr-li-st::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ok)}
.pr-li-st.off{color:var(--soft)}
.pr-li-st.off::before{background:var(--soft)}
.pr-hint{font-size:12px;color:var(--soft);line-height:1.5;margin:6px 2px 0}
.pr-edit{min-width:0}
.pr-pkg{display:flex;flex-direction:column;gap:16px}
.pr-sys{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px;border-radius:10px;background:var(--bg2);font-size:12.5px;color:var(--mute)}
.pr-sys span{display:inline-flex;align-items:center;gap:6px}
.pr-sys b{color:var(--ink);font-weight:600}
.pr-blk{border:1px solid var(--line);border-radius:12px;background:#fff;padding:18px 20px}
.pr-blk-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:14px;font-size:12.5px}
.pr-blk-h h3{font-size:15px;font-weight:600;color:var(--ink)}
.pr-blk-h b{color:var(--ink);font-weight:600}
.pr-big{position:relative;display:block;margin-bottom:14px}
.pr-big .in{height:56px;font-size:24px;font-weight:600;letter-spacing:-.02em;padding-right:110px;font-variant-numeric:tabular-nums;color:var(--ink)}
.pr-big em{position:absolute;right:16px;top:50%;transform:translateY(-50%);font-style:normal;font-size:13.5px;color:var(--mute)}
.pr-sw{display:flex;gap:22px;flex-wrap:wrap;margin-bottom:16px}
.pr-sw .tg{color:var(--ink)}
.pr-blk .f>span small{font-weight:400;color:var(--soft);margin-left:6px}
.pr-blk .f:last-child{margin-bottom:0}
.pr-tbl{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}
.pr-tbl th{text-align:left;font-weight:500;font-size:12px;color:var(--mute);padding:8px 10px;background:var(--bg2);white-space:nowrap}
.pr-tbl th:first-child{border-radius:8px 0 0 8px}
.pr-tbl th:last-child{border-radius:0 8px 8px 0}
.pr-tbl td{padding:10px;border-bottom:1px solid var(--line2);vertical-align:middle}
.pr-tbl tr:last-child td{border-bottom:0}
.pr-tbl small{color:var(--mute)}
.pr-tbl tr.bad td{background:#fef2f2}
[data-margin] th:not(:first-child),[data-margin] td:not(:first-child){text-align:right}
.pr-gain{font-weight:600;color:var(--ok);font-variant-numeric:tabular-nums;white-space:nowrap}
.pr-gain.bad{color:var(--err)}
.pr-prev{position:sticky;top:20px;display:flex;flex-direction:column;gap:12px}
.pr-card{position:relative;border:1px solid var(--line);border-radius:16px;padding:22px 20px;background:#fff;box-shadow:0 1px 2px rgba(24,24,27,.04),0 8px 24px -12px rgba(24,24,27,.15);transition:opacity .2s}
.pr-card.hot{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink),0 16px 32px -16px rgba(24,24,27,.35)}
.pr-card.off{opacity:.5}
.pr-card-tag{position:absolute;top:-11px;left:18px;padding:3px 10px;border-radius:99px;background:var(--ink);color:#fff;font-size:11px;font-weight:600;letter-spacing:.02em}
.pr-card h4{font-size:16px;font-weight:600;color:var(--ink)}
.pr-card-d{font-size:12.5px;color:var(--mute);margin-top:4px;line-height:1.5}
.pr-card-p{margin:14px 0 16px}
.pr-card-p b{font-size:26px;font-weight:600;letter-spacing:-.03em;color:var(--ink)}
.pr-card-p small{font-size:13px;color:var(--mute);margin-left:2px}
.pr-card ul{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:8px;font-size:13px;color:var(--txt)}
.pr-card li{position:relative;padding-left:20px;line-height:1.45}
.pr-card li::before{content:"";position:absolute;left:2px;top:4px;width:9px;height:5px;border-left:2px solid var(--ok);border-bottom:2px solid var(--ok);transform:rotate(-45deg)}
.pr-card-b{display:block;text-align:center;padding:10px;border-radius:10px;border:1px solid var(--line);font-size:13.5px;font-weight:600;color:var(--ink)}
.pr-card.hot .pr-card-b{background:var(--ink);border-color:var(--ink);color:#fff}
.pr-card-off{font-size:12px;color:var(--warn);margin:0}
.pr-scroll{overflow-x:auto;padding:6px 14px 14px}
.pr-matrix td,.pr-matrix th{white-space:nowrap}
.pr-matrix td[data-cell] b{display:block;color:var(--ink);font-weight:600}
.pr-matrix td[data-cell] .pr-gain{font-size:12px;font-weight:500}
.pr-matrix td.dim{opacity:.45}
.pr-matrix tr.off td:not(:first-child){opacity:.4}
.pr-matrix .tg{color:var(--ink)}
.pr-pct,.pr-money{position:relative;display:inline-block}
.pr-pct .in{width:78px;height:36px;padding:0 26px 0 10px;text-align:right}
.pr-pct em,.pr-money em{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-style:normal;color:var(--mute);font-size:12.5px}
.pr-money .in{width:160px;height:40px;padding:0 26px 0 12px;text-align:right;font-variant-numeric:tabular-nums}
.pr-terms{margin-top:24px;scroll-margin-top:20px}
.pr-addons{display:flex;flex-direction:column;gap:6px;padding:16px 22px 18px;border-top:1px solid var(--line2)}
.pr-addons .tg{color:var(--ink)}
.pr-addons p{font-size:12.5px;margin:0 0 0 46px}
.pr-chips{display:flex;flex-wrap:wrap;gap:10px;padding:16px 22px 4px}
.pr-chip{display:flex;align-items:center;gap:12px;padding:8px 10px 8px 12px;border:1px solid var(--line);border-radius:12px;background:var(--bg2)}
.pr-chip.on{background:#fff;border-color:var(--ink)}
.pr-chip .tg b{color:var(--ink);font-weight:600}
.pr-chip:not(.on) .pr-pct{opacity:.4}
.pr-ai td small{display:block;margin-top:3px;color:var(--mute);font-size:12px}
.pr-cells{display:flex;flex-wrap:wrap;gap:8px}
.pr-cell{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border:1px solid var(--line2);border-radius:10px;min-width:118px;background:#fff}
.pr-cell span{font-size:11.5px;color:var(--mute)}
.pr-cell b{color:var(--ink);font-weight:600}
.pr-cell .pr-gain{font-size:12px;font-weight:500}
.pr-cell.bad{border-color:#fecaca;background:#fef2f2}
.pr-bar{position:sticky;bottom:16px;z-index:20;display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:22px;padding:12px 14px 12px 20px;border-radius:14px;background:var(--dark);color:#fff;font-size:13.5px;box-shadow:0 18px 40px -16px rgba(0,0,0,.45)}
.pr-bar[hidden]{display:none}
.pr-bar>span{display:inline-flex;align-items:center;gap:10px}
.pr-bar>div{display:flex;gap:8px}
.pr-bar .btn.outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.25)}
.pr-bar .btn.outline:hover{background:rgba(255,255,255,.08)}
.pr-bar .btn.primary{background:#fff;color:var(--ink)}
.pr-dot{width:8px;height:8px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 4px rgba(249,115,22,.25)}
.is-err .in{border-color:var(--err)!important;box-shadow:0 0 0 3px rgba(220,38,38,.15)}
.pr-matrix.is-err,.pr-chips.is-err{outline:2px solid rgba(220,38,38,.35);outline-offset:2px;border-radius:8px}
@media(max-width:1280px){.pr-md{grid-template-columns:210px minmax(0,1fr)}.pr-prev{grid-column:2;position:static;max-width:340px}}
@media(max-width:900px){.pr-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.pr-md{grid-template-columns:1fr}.pr-list{flex-direction:row;overflow-x:auto}.pr-li{min-width:200px}.pr-hint{display:none}.pr-prev{grid-column:auto}}
@media(max-width:560px){.pr-bar{flex-direction:column;align-items:stretch}.pr-bar>div{justify-content:flex-end}.pr-blk{padding:16px 14px}[data-margin]{font-size:12px}[data-margin] th,[data-margin] td{padding:8px 4px}.pr-big .in{font-size:20px;padding-right:90px}}