/* =====================================================
   GODI SEO SPACE — CSS dùng chung cho toàn tool
   ===================================================== */
:root{
  /* ---- Nhận diện: CAM #FF5C27 + ĐEN ---- */
  --brand:#FF5C27;        /* màu chủ đạo: nút chính, điểm nhấn, logo */
  --brand-2:#E64A18;      /* cam đậm hơn cho trạng thái hover */
  --brand-soft:#FFEDE6;   /* nền cam nhạt */
  --forest:#111111;       /* ĐEN: nền sidebar, toast, trang login */
  --forest-2:#262626;     /* xám đậm: bề mặt nổi trên nền đen */

  --ink:#141414;
  --canvas:#F6F6F5;
  --panel:#FFFFFF;
  --line:#E5E5E3;
  --slate:#6B6B6B;

  /* ---- Màu TRẠNG THÁI: giữ nguyên vì mang ý nghĩa dữ liệu, ---- */
  /* ---- không phải màu thương hiệu (xanh=Published, vàng=Writing...) ---- */
  --leaf:#1E7A52;
  --leaf-soft:#E4F2EB;
  --amber:#B9770E;
  --amber-soft:#FBF0DC;
  --danger:#B4452F;

  --radius:10px;
  font-size:15px;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Inter',sans-serif;
  background:var(--canvas);color:var(--ink);
  display:flex;min-height:100vh;
}
a{color:var(--brand)}
h1{font-size:1.4rem;letter-spacing:-.01em}
h2{font-size:1rem;margin-bottom:12px}
.muted{color:var(--slate);font-size:.86rem}

/* ============ SIDEBAR ============ */
/* CHỈ sidebar (con trực tiếp của body). KHÔNG để selector trần "aside" —
   nó bắt mọi thẻ <aside> trong app và nhét left:0 + chữ trắng vào, làm panel
   report văng sang trái và chữ mất hút. */
body > aside{
  width:240px;background:var(--forest);color:#E9E9E9;
  display:flex;flex-direction:column;
  position:fixed;top:0;bottom:0;left:0;z-index:5;
}
/* Logo + tên app. Mặc định chữ ĐEN (dùng trên nền sáng: login, install, share);
   riêng trong sidebar nền đen thì đảo sang chữ trắng.
   KHÔNG đặt padding ở đây — mỗi nơi nhúng đã có padding riêng, để chung
   sẽ bị cộng dồn và logo lệch khỏi nội dung bên dưới. */
.brand{
  font-weight:700;font-size:1.02rem;color:var(--ink);
  display:flex;align-items:center;gap:9px;
  letter-spacing:-.01em;
}
.brand img{width:27px;height:auto;flex-shrink:0}
body > aside .brand{color:#fff;padding:20px 20px 16px}
nav{flex:1;padding:0 10px}
.nav-label{font-size:.66rem;text-transform:uppercase;letter-spacing:.1em;color:#7A7A7A;padding:6px 12px 8px}
.nav-item{
  display:flex;align-items:center;gap:10px;
  padding:9px 12px;border-radius:8px;
  font-size:.9rem;color:#B9B9B9;text-decoration:none;
  margin-bottom:2px;
}
.nav-item svg{width:16px;height:16px;flex-shrink:0;opacity:.75}
a.nav-item:hover{background:rgba(255,255,255,.06)}
.nav-item.active{background:#fff;color:var(--forest);font-weight:600}
.nav-item.soon{opacity:.4;cursor:default}
.nav-item .tag{margin-left:auto;font-size:.6rem;font-weight:600;background:rgba(255,255,255,.12);padding:2px 7px;border-radius:99px}
/* Khu cấu hình cuối sidebar — tách khỏi các tab làm việc bằng đường kẻ */
.nav-foot{padding:8px 10px;border-top:1px solid rgba(255,255,255,.08)}
.sidebar-foot{padding:14px 20px;border-top:1px solid rgba(255,255,255,.08);font-size:.78rem;color:#8C8C8C}
.sidebar-foot strong{color:#E9E9E9;display:block;font-weight:600}
.logout-link{display:inline-block;margin-top:6px;color:#8C8C8C;font-size:.76rem}

/* ============ MAIN ============ */
main{margin-left:240px;flex:1;padding:26px 30px 60px;min-width:0}
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}
.page-head p{color:var(--slate);font-size:.88rem;margin-top:4px;max-width:640px}
.head-actions{display:flex;gap:10px}

/* ============ NÚT & FORM ============ */
.btn{
  font-size:.85rem;font-weight:600;padding:9px 16px;border-radius:8px;
  border:1px solid var(--line);background:var(--panel);color:var(--ink);
  cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:7px;
}
.btn:hover{border-color:#C8CFC9}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.primary:hover{background:var(--brand-2);border-color:var(--brand-2)}
.btn.danger{color:var(--danger);border-color:#E7CFC8}
.btn.small{padding:5px 11px;font-size:.78rem}
.btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.form-panel{margin-bottom:18px}
details.panel summary{cursor:pointer;user-select:none;list-style:none}
details.panel summary::-webkit-details-marker{display:none}
details.panel[open] summary{margin-bottom:12px}

label{display:block;font-size:.82rem;font-weight:600;color:var(--slate)}
label input,label select{
  display:block;width:100%;margin-top:5px;
  padding:8px 11px;border:1px solid var(--line);border-radius:8px;
  font-size:.88rem;font-family:inherit;background:var(--canvas);color:var(--ink);
}
label input:focus,label select:focus{outline:2px solid var(--brand);outline-offset:-1px;background:#fff}
.inline-form{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.inline-form label{flex:1;min-width:180px}
.grid-form{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;align-items:end}
.form-actions{display:flex;gap:10px;align-items:end}
.checkbox-inline{display:flex;align-items:center;gap:8px;font-weight:500;margin:0}
.checkbox-inline input{width:auto;margin:0}

/* ============ TRANG PROJECT SETTINGS ============ */
.settings-stack{display:flex;flex-direction:column;gap:16px;max-width:720px}
.settings-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.settings-card h2{font-size:1rem;margin-bottom:4px}
.settings-card .hint{color:var(--slate);font-size:.85rem;line-height:1.5}
.settings-card.danger{border-color:#E7CFC8;background:#FEFAF9}
.settings-card.danger h2{color:var(--danger)}
.settings-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:14px}
.settings-meta{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;font-size:.85rem;margin-top:10px}
.settings-meta dt{color:var(--slate)}
.settings-meta dd{font-weight:600}
.btn.danger-solid{background:var(--danger);border-color:var(--danger);color:#fff}
.btn.danger-solid:hover{background:#9C3A27}
.btn.danger-solid:disabled{opacity:.45;cursor:not-allowed}
.confirm-name{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--brand-soft);padding:1px 6px;border-radius:4px;color:var(--ink)}

/* Khối con trong 1 card, có nhãn cho biết cài đặt này ăn tới đâu:
   dùng chung cả app hay chỉ riêng dự án đang mở. */
.scope-block{border:1px solid var(--line);border-radius:9px;padding:14px;margin-top:12px;position:relative}
.scope-tag{
  position:absolute;top:-8px;left:12px;background:var(--panel);
  padding:0 7px;font-size:.63rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--slate);
}
.scope-tag.project{color:var(--brand)}

/* Popup hướng dẫn từng bước (lấy key Google...) */
.guide{list-style:none;counter-reset:g;display:flex;flex-direction:column;gap:15px}
.guide li{counter-increment:g;padding-left:34px;position:relative;font-size:.86rem;line-height:1.5}
.guide li::before{
  content:counter(g);position:absolute;left:0;top:-1px;
  width:23px;height:23px;border-radius:50%;background:var(--brand);color:#fff;
  font-size:.72rem;font-weight:700;display:flex;align-items:center;justify-content:center;
}
.guide li > div{color:var(--slate);margin-top:3px}
.guide .hl{color:var(--brand);font-weight:700}
.guide .kbd{display:inline-block;background:var(--canvas);border:1px solid var(--line);
  border-radius:5px;padding:1px 6px;font-size:.78rem;color:var(--ink);margin:2px 3px 0 0}
.guide .warn{background:var(--amber-soft);border-left:3px solid var(--amber);
  color:#7A4E08;padding:9px 11px;border-radius:0 6px 6px 0;margin-top:6px;font-size:.82rem}
.copy-row{display:flex;align-items:center;gap:8px;margin-top:7px}
.copy-row code{flex:1;overflow-x:auto;white-space:nowrap;padding:7px 9px}

/* Chỉ báo trạng thái kết nối (Google...) */
.conn-state{display:inline-flex;align-items:center;gap:8px;font-size:.86rem;font-weight:600;
  padding:7px 12px;border-radius:99px}
.conn-state .dot-state{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.conn-state.on{background:var(--leaf-soft);color:#155C3E}
.conn-state.on .dot-state{background:var(--leaf);box-shadow:0 0 0 3px rgba(30,122,82,.18)}
.conn-state.off{background:#F0F0EE;color:var(--slate)}
.conn-state.off .dot-state{background:#A8A8A8}

.alert{padding:11px 14px;border-radius:8px;font-size:.88rem;margin-bottom:14px}
.alert.error{background:#FBEAE5;color:var(--danger)}
.alert.success{background:var(--leaf-soft);color:#155C3E}

/* ============ THỐNG KÊ ============ */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:13px 15px}
.stat .k{font-size:.7rem;text-transform:uppercase;letter-spacing:.07em;color:var(--slate)}
.stat .v{font-size:1.45rem;font-weight:600;margin-top:2px;font-variant-numeric:tabular-nums}

/* ============ TOOLBAR & BẢNG ============ */
.toolbar{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius) var(--radius) 0 0;
  padding:12px 14px;border-bottom:none;
}
.search{flex:1;min-width:200px;max-width:320px}
.search input{
  width:100%;padding:8px 12px;border:1px solid var(--line);border-radius:8px;
  font-size:.87rem;background:var(--canvas);font-family:inherit;
}
.toolbar select{
  padding:8px 12px;border:1px solid var(--line);border-radius:8px;
  font-size:.85rem;background:var(--canvas);font-family:inherit;cursor:pointer;
}
.toolbar .count{margin-left:auto;font-size:.82rem;color:var(--slate)}

.table-wrap{
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);overflow-x:auto;
}
.table-wrap.joined{border-radius:0 0 var(--radius) var(--radius)}
table{width:100%;border-collapse:collapse}
thead th{
  font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--slate);font-weight:600;text-align:left;
  padding:11px 13px;border-bottom:1px solid var(--line);
  background:#FAFBF9;white-space:nowrap;
}
tbody td{
  padding:11px 13px;border-bottom:1px solid var(--line);
  font-size:.87rem;vertical-align:middle;white-space:nowrap;
}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:#FAFBF9}
tr.inactive{opacity:.45}
tr.st-picked,tr.st-writing{background:#FDF8EE}
tr.st-live{background:#F4FAF7}
tr.edit-row td{background:#F2F5F1;white-space:normal}
.empty{padding:36px;text-align:center;color:var(--slate)}
.domain-cell{font-weight:600}
.domain-cell a{text-decoration:none;color:var(--ink)}
.domain-cell a:hover{color:var(--brand)}
.domain-cell span{display:block;font-size:.73rem;color:var(--slate);font-weight:400;margin-top:1px}
.num{font-variant-numeric:tabular-nums}
.price{font-weight:600;font-variant-numeric:tabular-nums}
.pill{
  display:inline-block;font-size:.73rem;font-weight:600;
  padding:3px 10px;border-radius:99px;
  background:var(--canvas);border:1px solid var(--line);color:var(--slate);
}
a.example{font-weight:500;text-decoration:none;font-size:.84rem}
a.example:hover{text-decoration:underline}
.row-actions a{font-size:.8rem;margin-right:8px}

/* DR meter */
.dr{display:flex;flex-direction:column;gap:4px;width:56px}
.dr b{font-weight:600;font-size:.92rem;font-variant-numeric:tabular-nums}
.dr .bar{height:4px;border-radius:99px;background:#EAEEEA;overflow:hidden}
.dr .bar i{display:block;height:100%;border-radius:99px;background:var(--leaf)}
.dr.mid .bar i{background:var(--amber)}
.dr.low .bar i{background:var(--danger)}

/* Trạng thái */
.status{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:600;padding:4px 11px;border-radius:99px}
.status::before{content:"";width:6px;height:6px;border-radius:50%}
.status.live{background:var(--leaf-soft);color:#155C3E}.status.live::before{background:#1E7A52}
.status.writing{background:var(--amber-soft);color:#8A5A0B}.status.writing::before{background:var(--amber)}
.status.open{background:#EEF0EE;color:var(--slate)}.status.open::before{background:#9AA79F}
.status-select{
  padding:5px 8px;border-radius:8px;border:1px solid var(--line);
  font-size:.8rem;font-weight:600;font-family:inherit;cursor:pointer;background:#fff;
}
.status-select.s-live{background:var(--leaf-soft);color:#155C3E;border-color:#C6E2D4}
.status-select.s-picked,.status-select.s-writing{background:var(--amber-soft);color:#8A5A0B;border-color:#EBD9B8}
.status-select.s-rejected{color:var(--danger)}
.status-form{display:inline}

/* Danh sách checkbox chào domain */
.checkbox-list{max-height:280px;overflow-y:auto;border:1px solid var(--line);border-radius:8px;margin-bottom:12px}
.checkbox-row{
  display:flex;align-items:center;gap:10px;
  padding:9px 12px;border-bottom:1px solid var(--line);
  font-weight:500;cursor:pointer;
}
.checkbox-row:last-child{border-bottom:none}
.checkbox-row:hover{background:var(--canvas)}
.checkbox-row input{width:auto;margin:0}
.cb-domain{font-weight:600}
.cb-meta{margin-left:auto;font-size:.78rem;color:var(--slate)}

/* Share link */
.share-row{display:flex;gap:10px;align-items:center;margin-bottom:8px}
.share-row input{
  flex:1;padding:8px 11px;border:1px solid var(--line);border-radius:8px;
  font-size:.82rem;font-family:monospace;background:var(--canvas);color:var(--slate);
}
.share-row.inactive input{text-decoration:line-through;opacity:.5}

/* ============ TRANG LOGIN ============ */
body.login-page{align-items:center;justify-content:center;background:var(--forest)}
.login-box{
  background:var(--panel);border-radius:14px;padding:30px 28px;
  width:100%;max-width:360px;box-shadow:0 12px 40px rgba(0,0,0,.3);
}
.login-box label{margin-bottom:12px}
.login-box .btn{justify-content:center;margin-top:6px}

/* ============ TRANG SHARE (khách xem) ============ */
body.share-page{display:block;background:var(--canvas)}
.share-container{max-width:1560px;margin:0 auto;padding:40px 32px 72px}
/* Logo thẳng hàng với H1 bên dưới (không padding ngang), cách ra cho thoáng */
.share-head{margin-bottom:30px}
.share-head .brand{margin-bottom:30px}
.share-head h1{margin-top:0;font-size:1.6rem}
.share-client-site{display:inline-block;margin-top:7px;font-size:.88rem;font-weight:600;text-decoration:none}
.share-client-site:hover{text-decoration:underline}
.share-head p{color:var(--slate);margin-top:14px;max-width:640px;line-height:1.6}
.share-submit{margin-top:22px;text-align:right}

/* ============ RESPONSIVE ============ */
@media (max-width:900px){
  aside{display:none}
  main{margin-left:0;padding:18px 14px 50px}
  .stats{grid-template-columns:repeat(2,1fr)}
}

/* ============ Ô CHỌN DỰ ÁN (sidebar) ============ */
.project-picker{
  margin:4px 14px 16px;
  background:var(--forest-2);
  border:1px solid rgba(255,255,255,.09);
  border-radius:var(--radius);
  padding:10px 12px;
  position:relative;
}
.project-picker label{font-size:.68rem;text-transform:uppercase;letter-spacing:.09em;color:#8C8C8C;display:block;margin-bottom:3px;font-weight:600}
.project-picker select{
  width:100%;background:transparent;border:none;color:#fff;
  font-family:inherit;font-weight:600;font-size:.9rem;
  cursor:pointer;outline:none;appearance:none;-webkit-appearance:none;
  padding:2px 18px 2px 0;margin:0;
}
.project-picker select option{color:var(--ink);background:#fff}
.project-picker::after{content:"▾";position:absolute;right:14px;bottom:12px;color:#8C8C8C;pointer-events:none;font-size:.8rem}

/* Hàng 2 khối nhập domain */
.import-row{display:flex;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.import-row .panel{margin-bottom:0;min-width:300px}
input[type=file]{
  display:block;width:100%;margin-top:5px;padding:7px 10px;
  border:1px dashed var(--line);border-radius:8px;
  font-size:.84rem;background:var(--canvas);font-family:inherit;
}
code{background:var(--canvas);border:1px solid var(--line);border-radius:5px;padding:1px 6px;font-size:.8rem}

/* ============ MODAL (popup trên trang) ============ */
.modal-overlay{
  position:fixed;inset:0;z-index:50;
  background:rgba(0,0,0,.45);
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  animation:fadeIn .15s ease;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal-box{
  background:var(--panel);border-radius:14px;
  padding:22px 24px;width:100%;max-width:520px;
  max-height:90vh;overflow-y:auto;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
  animation:rise .18s ease;
}
@keyframes rise{from{transform:translateY(12px);opacity:0}to{transform:translateY(0);opacity:1}}
.modal-box h2{margin-bottom:14px}
.modal-form label{margin-bottom:11px}
.modal-form.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px}
.modal-form.grid2 label{margin-bottom:0}
.modal-form .full{grid-column:1/-1}
.modal-form .form-actions{margin-top:6px;display:flex;gap:10px;width:100%}

/* ============ TOAST (thông báo nổi) ============ */
.toast{
  position:fixed;right:18px;bottom:18px;z-index:60;
  background:var(--forest);color:#fff;
  padding:11px 16px;border-radius:10px;
  font-size:.87rem;font-weight:500;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  animation:rise .2s ease;max-width:340px;
}
.toast.error{background:var(--danger)}
@media (prefers-reduced-motion:reduce){.modal-overlay,.modal-box,.toast{animation:none}}

/* ============ THANH LỌC / TÌM KIẾM + THAO TÁC HÀNG LOẠT ============ */
.table-toolbar{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-bottom:12px;flex-wrap:wrap;
}
.table-toolbar .filters{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.search-box{
  padding:8px 12px;border:1px solid var(--line);border-radius:8px;
  font-size:.88rem;font-family:inherit;background:var(--panel);color:var(--ink);
  min-width:240px;
}
.search-box:focus{outline:2px solid var(--brand);outline-offset:-1px;background:#fff}
.table-toolbar select{
  padding:8px 11px;border:1px solid var(--line);border-radius:8px;
  font-size:.88rem;font-family:inherit;background:var(--panel);color:var(--ink);
}
.bulk-bar{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  background:var(--leaf-soft);border:1px solid #CDE7DA;border-radius:8px;padding:6px 10px;
}
/* Thuộc tính hidden phải thắng display:flex ở trên (nếu không thanh bulk luôn hiện) */
.bulk-bar[hidden]{display:none}
.bulk-count{font-size:.82rem;font-weight:600;color:var(--ink);margin-right:2px}
.check-cell{width:36px;text-align:center}
.check-cell input{width:16px;height:16px;cursor:pointer;accent-color:var(--brand)}
tbody tr:has(.row-check:checked){background:var(--leaf-soft)}


/* ============ LỌC THEO RANGE (DUAL SLIDER) ============ */
.range-row{
  display:flex;gap:22px;flex-wrap:wrap;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:12px 16px;margin-bottom:14px;
}
.range-filter{flex:1;min-width:170px}
.rf-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.rf-head span:first-child{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--slate);font-weight:700}
.rf-val{font-size:.8rem;font-weight:600;color:var(--brand);font-variant-numeric:tabular-nums}
.dual{position:relative;height:22px}
.dual .rail{position:absolute;left:0;right:0;top:9px;height:4px;border-radius:3px;background:var(--line)}
.dual .rail>i{position:absolute;top:0;height:100%;background:var(--brand);border-radius:3px}
.dual input[type=range]{
  position:absolute;left:0;top:0;width:100%;height:22px;margin:0;
  -webkit-appearance:none;appearance:none;background:none;pointer-events:none;
}
.dual input[type=range]:focus{outline:none}
.dual input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;pointer-events:auto;width:16px;height:16px;border-radius:50%;
  background:var(--brand);border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.4);
  cursor:pointer;margin-top:-6px;
}
.dual input[type=range]::-moz-range-thumb{
  pointer-events:auto;width:16px;height:16px;border-radius:50%;
  background:var(--brand);border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.4);cursor:pointer;
}
.dual input[type=range]::-webkit-slider-runnable-track{background:none;height:22px}
.dual input[type=range]::-moz-range-track{background:none;height:22px}


/* ============ CỐ ĐỊNH CỘT BẢNG (không nhảy theo nội dung) ============ */
table.fixed-cols{table-layout:fixed;width:100%;min-width:920px}
.fixed-cols td, .fixed-cols th{overflow:hidden}
td.ellip{text-overflow:ellipsis;white-space:nowrap}
.fixed-cols th{text-overflow:ellipsis}


/* ============ ARTICLE REQUIREMENTS ============ */
.req-link{font-size:.82rem;font-weight:500;text-decoration:none}
.req-link:hover{text-decoration:underline}
.req-link.has-override{color:var(--amber);font-weight:600}
.req-link.has-override::after{content:" ●";font-size:.6rem;vertical-align:middle}
.req-view{white-space:pre-wrap;background:var(--canvas);border:1px solid var(--line);border-radius:8px;padding:12px 14px;font-size:.88rem;line-height:1.6}


/* ============ TAGS ============ */
.tag-chip{
  display:inline-flex;align-items:center;gap:5px;
  font-size:.7rem;font-weight:600;line-height:1;
  padding:3px 8px;border-radius:99px;border:1px solid transparent;
  margin:2px 4px 2px 0;white-space:nowrap;
}
.tag-chip b{cursor:pointer;font-weight:700;font-size:.85rem;opacity:.7}
.tag-chip b:hover{opacity:1}
.tags-bar{display:flex;flex-wrap:wrap;align-items:center;min-height:26px;margin-bottom:8px}
.bulk-sep{width:1px;height:20px;background:var(--line);margin:0 2px}
/* Ô domain: tên cắt gọn 1 dòng, tag xuống dòng dưới */
.fixed-cols td.domain-cell{white-space:normal;vertical-align:top}
.dom-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.dom-tags{display:flex;flex-wrap:wrap;margin-top:3px}


/* ============ SHARE PAGE: filters + Google Docs field ============ */
/* Thẻ tóm tắt trên trang khách. auto-fit để khi link share tắt giá
   (còn 3 thẻ) vẫn tự dàn đều, không bị hụt 1 ô trống. */
.share-stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));
  gap:12px;margin-bottom:20px;
}
.share-stats .stat{padding:14px 16px}
.share-stats .v{font-size:1.3rem;letter-spacing:-.01em}
.share-stats .s{font-size:.72rem;color:var(--slate);margin-top:3px;line-height:1.35}

.share-filters{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;margin-bottom:20px}
.share-filters .sf-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
/* margin-top thay cho style inline trong share.php — tách 2 hàng lọc cho dễ thở */
.share-filters .range-row{margin:18px 0 0;border:none;background:none;padding:0;gap:26px}
.doc-field{display:block;text-align:left;max-width:520px;margin:0 auto 14px;font-weight:600;color:var(--slate);font-size:.84rem}
.doc-field input{width:100%;margin-top:6px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;font-family:inherit;font-size:.9rem;background:#fff}
.doc-field small{display:block;margin-top:5px;font-weight:400}


/* ============ NOTIFICATION CENTER (bell) ============ */
.notif-bell{
  display:flex;align-items:center;gap:10px;width:calc(100% - 20px);margin:0 10px 8px;
  padding:9px 12px;border-radius:8px;border:none;background:rgba(255,255,255,.06);
  color:#B9B9B9;font-size:.9rem;font-family:inherit;cursor:pointer;
}
.notif-bell:hover{background:rgba(255,255,255,.12)}
.notif-bell.active{background:#fff;color:var(--forest)}
.notif-bell svg{width:16px;height:16px;flex-shrink:0}
.notif-bell span:nth-child(2){flex:1;text-align:left}
.notif-badge{
  min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:var(--danger);color:#fff;
  font-size:.68rem;font-weight:700;display:flex;align-items:center;justify-content:center;
}
.notif-panel{
  position:fixed;left:250px;top:60px;z-index:60;width:340px;max-height:72vh;overflow:auto;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 12px 40px rgba(0,0,0,.22);
}
.notif-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--line);font-weight:700;font-size:.9rem}
.notif-head button{border:none;background:none;color:var(--brand);font-size:.78rem;font-weight:600;cursor:pointer;font-family:inherit}
.notif-item{display:flex;gap:10px;padding:11px 14px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
.notif-item:last-child{border-bottom:none}
.notif-item:hover{background:#FAFBF9}
.notif-item.unread{background:var(--leaf-soft)}
.notif-item.unread:hover{background:#D9EDE3}
.notif-icon{font-size:1.1rem;line-height:1.3}
.notif-body{display:flex;flex-direction:column;gap:2px}
.notif-text{font-size:.85rem;line-height:1.4}
.notif-time{font-size:.72rem;color:var(--slate)}
.notif-empty{padding:24px;text-align:center;color:var(--slate);font-size:.85rem}


/* ============ SHARE PAGE — fixes (filter select, REQ button, Doc cell) ============ */
/* Dropdown "All links" trên trang khách */
.share-filters select{
  padding:8px 12px;border:1px solid var(--line);border-radius:8px;
  font-size:.87rem;font-family:inherit;background:var(--canvas);color:var(--ink);cursor:pointer;
}
.share-filters select:focus{outline:2px solid var(--brand);outline-offset:-1px;background:#fff}
/* Nút "View" ở cột Req là <button> -> reset về dạng link nhỏ gọn */
button.req-link{background:none;border:none;padding:2px 8px;cursor:pointer;font-family:inherit;
  color:var(--brand);border-radius:6px;font-size:.8rem;font-weight:600}
button.req-link:hover{background:var(--brand-soft)}
/* Cột Doc (Google Docs theo từng domain) */
.doc-cell{white-space:normal}
.doc-view{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.doc-edit{display:flex;align-items:center;gap:6px}
.doc-input{
  flex:1;min-width:120px;max-width:100%;padding:6px 9px;border:1px solid var(--line);border-radius:7px;
  font-family:inherit;font-size:.82rem;background:#fff;color:var(--ink);
}
.doc-input:focus{outline:2px solid var(--brand);outline-offset:-1px}
.doc-input.doc-error{border-color:var(--danger);background:#FDF3F0}
th[title]{cursor:help}
/* hidden phải thắng display:flex/inline-flex ở trên (nếu không view+edit cùng hiện) */
.doc-view[hidden], .doc-edit[hidden]{display:none}


/* ============ KHÁCH TỪ CHỐI / HOÀN TÁC (share page) ============ */
.status.rejected{background:#FBEAE5;color:var(--danger)}
.status.rejected::before{background:var(--danger)}
/* Nút hành động nhỏ dưới badge trạng thái */
.row-act{
  display:block;margin-top:4px;background:none;border:none;padding:0;cursor:pointer;
  font-family:inherit;font-size:.74rem;font-weight:600;color:var(--slate);text-align:left;
}
.row-act:hover{color:var(--danger);text-decoration:underline}
.row-act:disabled{opacity:.5;cursor:default}
.reject-reason{
  display:block;margin-top:3px;font-size:.72rem;color:var(--slate);font-style:italic;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;
}
.status-cell{white-space:normal}


/* ============ SORT HEADER + PHÂN TRANG (admin) ============ */
thead th[data-sort]{cursor:pointer;user-select:none;position:relative;padding-right:20px}
thead th[data-sort]:hover{color:var(--ink);background:#F2F5F1}
thead th[data-sort]::after{
  content:"⇅";position:absolute;right:7px;top:50%;transform:translateY(-50%);
  font-size:.72rem;opacity:.25;font-weight:400;
}
thead th.sorted-asc::after{content:"▲";opacity:1;color:var(--brand);font-size:.6rem}
thead th.sorted-desc::after{content:"▼";opacity:1;color:var(--brand);font-size:.6rem}
.pager{
  display:flex;align-items:center;gap:10px;justify-content:flex-end;
  margin-top:12px;flex-wrap:wrap;
}
.pager .pg-now{font-size:.82rem;font-weight:600;color:var(--slate);font-variant-numeric:tabular-nums}
.pager .btn:disabled{opacity:.45;cursor:default}
.pager .muted{margin-right:auto}

/* ============ REALTIME REPORT ============ */
/* Lưới 4 cột: KPI chiếm 1, biểu đồ 2, biểu đồ đường 4 (span-* trong definition) */
.report-toolbar{display:flex;align-items:center;gap:10px}

/* Chọn khoảng ngày: nút + popover. Lịch là input[type=date] của trình duyệt,
   không thư viện — đúng luật "không npm, không build". */
.range-pick{position:relative}
.range-pop{
  position:absolute;top:calc(100% + 6px);right:0;z-index:7;width:230px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 12px 30px rgba(0,0,0,.12);padding:6px;
}
.range-pop[hidden]{display:none}
.range-opt{display:block;padding:8px 10px;border-radius:7px;font-size:.84rem;
  color:var(--ink);text-decoration:none}
.range-opt:hover{background:var(--canvas)}
.range-opt.active{background:var(--brand-soft);color:var(--brand);font-weight:700}
.range-opt-label{font-size:.66rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--slate);font-weight:700;padding:4px 10px}
/* Hàng view: tên bấm để nạp, 2 nút nhỏ bên phải để ghi đè / xoá */
.view-row{display:flex;align-items:center;gap:2px}
.view-row .range-opt{flex:1;text-align:left;border:0;background:none;cursor:pointer;
  font-family:inherit;font-weight:500}
.view-row .rb-btn{flex-shrink:0;opacity:0;transition:opacity .12s}
.view-row:hover .rb-btn{opacity:.6}
.view-row .rb-btn:hover{opacity:1}

.range-custom{border-top:1px solid var(--line);margin-top:6px;padding:8px 10px 4px;
  display:flex;flex-direction:column;gap:8px}
.range-custom label{font-size:.76rem}

/* Lưới do GridStack định vị (absolute) — không dùng CSS grid nữa.
   GridStack chỉ lo VỊ TRÍ, toàn bộ hình thức block vẫn là CSS dưới đây. */
.grid-stack{margin:0 -7px}
.report-block{background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:14px 15px;display:flex;flex-direction:column;
  overflow:hidden}
.report-block.is-error{border-color:#F0C9BF;background:#FEF8F6}

/* SELECTOR DÀI LÀ CỐ Ý — phải nặng hơn GridStack, đừng rút gọn.
   GridStack khai:
     .grid-stack>.grid-stack-item>.grid-stack-item-content{overflow-y:auto}
   tức (0,3,0). Viết ngắn kiểu .report-block (0,1,0) hay
   .grid-stack-item-content.report-block (0,2,0) đều THUA -> card dính scrollbar
   vĩnh viễn dù kéo to cỡ nào. Đây là (0,4,0).
   container-type:size -> nội dung bên trong dùng được đơn vị cqh/cqw để co theo
   card. CHỈ áp cho block trong lưới: block preview trong panel không có chiều cao
   cố định, dính contain:size là nó sập về 0. */
.grid-stack > .grid-stack-item > .grid-stack-item-content.report-block{
  /* ĐỪNG THÊM inset:0 VÀO ĐÂY. GridStack áp margin (khoảng cách giữa các block)
     BẰNG CHÍNH inset của -content — set inset:0 là ăn mất hết khoảng cách,
     các card dính sát vào nhau. Đã mắc lỗi này một lần rồi. */
  overflow:hidden;container-type:size}

/* min-height:0 để flex item được phép co NHỎ HƠN nội dung — thiếu nó thì
   .rb-body cứ giữ chiều cao nội dung và đẩy tràn ra ngoài card. */
.rb-body{min-height:0}
.rb-chart{flex:1;min-height:0}

/* Số KPI co theo chiều cao card. clamp để không bé quá cũng không to quá. */
.grid-stack-item-content .rb-kpi{font-size:clamp(1rem,20cqh,2.1rem);line-height:1.1}
/* Card quá thấp thì bỏ bớt phần phụ, thà giấu còn hơn cắt cụt */
@container (max-height:112px){
  .rb-foot{display:none}
  .rb-cmp{margin-top:2px}
}
@container (max-height:78px){ .rb-cmp .rb-prev{display:none} }

/* Kéo bằng thanh tiêu đề, nên nó phải trông "cầm được" */
.grid-stack-item .rb-head{cursor:move}
.grid-stack-item .rb-btn{cursor:pointer}

/* Ô báo chỗ block sẽ rơi xuống: mặc định GridStack tô xám rgba(0,0,0,.1) */
.grid-stack-placeholder > .placeholder-content{
  background:var(--brand-soft);border:2px dashed var(--brand);border-radius:var(--radius)}

/* Tay cầm resize: mặc định mờ tịt, chỉ hiện rõ khi rê vào block */
.grid-stack-item > .ui-resizable-handle{opacity:0;transition:opacity .12s}
.grid-stack-item:hover > .ui-resizable-handle{opacity:.45}
.grid-stack-item > .ui-resizable-handle:hover{opacity:1}
.grid-stack-item.ui-draggable-dragging > .grid-stack-item-content{
  box-shadow:0 10px 26px rgba(0,0,0,.14)}

.rb-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:9px}
.rb-head h3{font-size:.82rem;font-weight:700;color:var(--ink);letter-spacing:.01em}
.rb-src{font-size:.66rem;color:var(--slate);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.rb-body{flex:1;display:flex;flex-direction:column;justify-content:center}
.rb-foot{margin-top:9px;font-size:.68rem;color:var(--slate)}

.rb-kpi{font-size:1.72rem;font-weight:800;color:var(--ink);line-height:1.15;letter-spacing:-.02em}
.rb-cmp{display:flex;align-items:center;gap:7px;margin-top:5px;flex-wrap:wrap}
/* Xanh/đỏ ở đây là TỐT/XẤU do server chấm, không phải tăng/giảm.
   Avg Position giảm -> mũi tên xuống nhưng vẫn XANH, đúng ý nghĩa. */
.rb-delta{font-size:.76rem;font-weight:700}
.rb-delta.up{color:var(--leaf)}
.rb-delta.down{color:var(--danger)}
.rb-delta.flat{color:var(--slate);font-weight:600}
.rb-prev{font-size:.72rem;color:var(--slate)}

.rb-empty{color:var(--slate);font-size:.8rem;text-align:center;padding:18px 4px}
.rb-skeleton{height:42px;border-radius:6px;background:linear-gradient(90deg,var(--canvas) 25%,#EDEDEB 50%,var(--canvas) 75%);
  background-size:200% 100%;animation:rbShimmer 1.2s ease-in-out infinite}
@keyframes rbShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Ôm theo card thay vì chặn cứng 290px. Bảng 10 dòng trong card thấp thì vẫn
   phải cuộn — đó là chuyện bình thường của bảng, không phải lỗi tràn. */
.rb-table-wrap{overflow:auto;flex:1;min-height:0}
.rb-table{width:100%;border-collapse:collapse;font-size:.78rem}
.rb-table th{position:sticky;top:0;background:var(--panel);text-align:left;font-size:.68rem;
  text-transform:uppercase;letter-spacing:.03em;color:var(--slate);padding:6px 8px;border-bottom:1px solid var(--line)}
.rb-table td{padding:6px 8px;border-bottom:1px solid var(--line);color:var(--ink)}
.rb-table td:first-child{max-width:210px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rb-table .num{text-align:right;font-variant-numeric:tabular-nums}
/* Cột số thứ tự: hẹp, mờ, không tranh chú ý với dữ liệu */
.rb-table .rb-idx{width:1%;white-space:nowrap;color:var(--slate);
  font-variant-numeric:tabular-nums;text-align:right;padding-right:4px}
/* Thanh phân trang nằm ngoài vùng cuộn của bảng -> luôn thấy */
.rb-pager{display:flex;align-items:center;justify-content:flex-end;gap:8px;
  padding-top:7px;font-size:.74rem;color:var(--slate);flex-shrink:0}
.rb-pager .rb-btn{border:1px solid var(--line);padding:2px 8px;line-height:1.4}
.rb-pager .rb-btn:disabled{opacity:.35;cursor:default}
.rb-pager .rb-btn:disabled:hover{background:none;border-color:var(--line)}
.rb-table tr:last-child td{border-bottom:0}

/* Responsive do GridStack lo: dưới 768px nó tự dồn về 1 cột (oneColumnSize).
   Ở chế độ 1 cột nó KHOÁ kéo thả — đúng, vì kéo trên mobile là cực hình. */

/* ---- Nút nhỏ trên đầu mỗi block (edit / delete / duplicate) ---- */
.rb-tools{display:flex;align-items:center;gap:6px}
.rb-btn{border:1px solid transparent;background:none;color:var(--slate);cursor:pointer;
  font-size:.78rem;line-height:1;padding:3px 5px;border-radius:5px}
.rb-btn:hover{background:var(--canvas);border-color:var(--line);color:var(--ink)}
.report-block:hover .rb-btn{color:var(--ink)}

/* ---- Panel dựng block (bên phải) ----
   Thay cho modal: modal che mất chính cái report đang dựng. Panel đẩy lưới hẹp
   lại nhưng vẫn thấy, nên preview đối chiếu được với block xung quanh. */
.report-panel{
  /* left:auto và color khai TƯỜNG MINH: panel là thẻ <aside>, mà sidebar cũng
     là <aside>. Không chốt hai cái này thì nó ăn phải left:0 + chữ trắng của
     sidebar -> văng sang trái, chữ mất hút trên nền trắng. */
  position:fixed;top:0;right:0;bottom:0;left:auto;width:460px;z-index:6;
  background:var(--panel);color:var(--ink);border-left:1px solid var(--line);
  box-shadow:-10px 0 30px rgba(0,0,0,.07);
  display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .18s ease;
}
.report-panel.open{transform:none}
main{transition:margin-right .18s ease}
body.panel-open main{margin-right:460px}
.rp-head{display:flex;align-items:center;justify-content:space-between;
  padding:15px 18px;border-bottom:1px solid var(--line);flex-shrink:0}
.rp-head h2{font-size:1rem}
.rp-body{flex:1;overflow-y:auto;padding:16px 18px}
.rp-foot{display:flex;gap:10px;padding:12px 18px;border-top:1px solid var(--line);
  background:var(--canvas);flex-shrink:0}
/* Màn hẹp: panel phủ toàn màn, đẩy lưới nữa thì không còn chỗ mà nhìn */
@media (max-width:1200px){
  .report-panel{width:min(460px,100vw)}
  body.panel-open main{margin-right:0}
}

/* ---- Block Text ---- */
/* Chữ dài hơn khung thì cuộn trong block, không đẩy tràn ra ngoài card */
.rb-text{overflow-y:auto;font-size:.86rem;line-height:1.6;color:var(--ink);
  align-self:stretch;flex:1;min-height:0}
.rb-text h2{font-size:1.02rem;margin:0 0 7px}
.rb-text h3{font-size:.92rem;margin:11px 0 5px}
.rb-text h4{font-size:.86rem;margin:10px 0 4px}
.rb-text p{margin:0 0 8px}
.rb-text ul,.rb-text ol{margin:0 0 8px;padding-left:20px}
.rb-text li{margin-bottom:3px}
.rb-text blockquote{border-left:3px solid var(--brand);padding-left:11px;color:var(--slate);margin:0 0 8px}
.rb-text a{color:var(--brand)}
.rb-text > *:last-child{margin-bottom:0}

/* ---- Block Image ---- */
/* Margin âm để ảnh dùng HẾT bề ngang card, huỷ padding 14/15px của .report-block.
   Card có overflow:hidden nên góc ảnh tự bị bo theo card, khỏi cần border-radius.
   Lưu ý: khoảng trống hai bên ở chế độ CONTAIN là BẢN CHẤT của contain — nó giữ
   trọn khung hình nên tỉ lệ ảnh lệch tỉ lệ card là phải có viền. Cắt padding chỉ
   thu hẹp được chừng đó. Muốn hết sạch viền thì phải dùng COVER (chấp nhận cắt ảnh). */
.rb-img{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;
  margin:0 -15px -14px}
.rb-img img{max-width:100%;max-height:100%;width:100%;height:100%;
  object-fit:var(--fit,contain)}

/* ---- Picker: soạn text ---- */
.pk-toolbar{display:flex;flex-wrap:wrap;gap:4px;padding:6px;border:1px solid var(--line);
  border-radius:8px 8px 0 0;border-bottom:0;background:var(--canvas)}
.pk-toolbar button{border:1px solid transparent;background:none;cursor:pointer;
  font-size:.76rem;padding:4px 8px;border-radius:5px;color:var(--ink);font-family:inherit}
.pk-toolbar button:hover{background:var(--panel);border-color:var(--line)}
.pk-editor{border:1px solid var(--line);border-radius:0 0 8px 8px;padding:11px;
  min-height:190px;max-height:340px;overflow-y:auto;font-size:.86rem;line-height:1.6;
  background:var(--panel)}
.pk-editor:focus{outline:2px solid var(--brand);outline-offset:-1px}
.pk-editor h2{font-size:1.02rem;margin:0 0 6px}
.pk-editor h3{font-size:.92rem;margin:9px 0 4px}
.pk-editor ul,.pk-editor ol{padding-left:20px}

/* ---- Picker: upload ảnh ---- */
.pk-img-prev{border:1px dashed var(--line);border-radius:8px;background:var(--canvas);
  min-height:140px;display:flex;align-items:center;justify-content:center;
  margin-bottom:9px;overflow:hidden;padding:6px}
.pk-img-prev img{max-width:100%;max-height:190px;border-radius:5px}

/* ---- Picker ---- */
.pk-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;margin-bottom:12px}
.pk-grid .pk-full{grid-column:1/-1}
.pk-slot .pk-opt{font-weight:400;color:var(--slate);font-size:.72rem}
.pk-sec{border-top:1px solid var(--line);padding-top:12px;margin-top:4px}
.pk-sec-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
.pk-sec-head b{font-size:.82rem}
.pk-filter{display:grid;grid-template-columns:1fr .8fr 1.4fr auto;gap:7px;align-items:center;margin-bottom:7px}
/* Style chung cho input/select là "label input, label select" — bắt buộc nằm TRONG
   <label>. Hàng filter không có label nên phải khai lại, nếu không nó rơi về
   giao diện mặc định của trình duyệt, lạc hẳn so với phần còn lại. */
.pk-filter select,.pk-filter input{
  width:100%;padding:7px 9px;border:1px solid var(--line);border-radius:8px;
  font-size:.84rem;font-family:inherit;background:var(--canvas);color:var(--ink);
}
.pk-filter select:focus,.pk-filter input:focus{outline:2px solid var(--brand);outline-offset:-1px;background:#fff}
/* Lựa chọn GA4 không ghép được với cái đang chọn -> làm mờ, hậu tố "— n/a" */
.pk-grid select option:disabled{color:#B9BCC1}