/* MAY SINH tu admin/admin.css cua kho tiem (tools/sync-from-site.mjs). KHONG SUA TAY trong luc con sync.
   Chi con luat cua ho lop Marketing + lop chung web dung (docs/dot-3.md muc 3.2c). */
/* ============================================================
   Nailounge Admin — admin.css
   1. Tokens: imports ONLY ../nailounge-new/colors_and_type.css
      (font URLs resolve relative to the IMPORTED file — B9).
      NEVER import site.css (marketing CSS, global side effects).
   2. Component recipes copied VERBATIM from nailounge-new/css/
      site.css (the plan Task 8 list) — the ONLY block allowed to
      carry color literals. ~120 duplicated lines accepted;
      a shared components.css is post-v1.
   3. Admin shell: every color/spacing/radius/shadow below comes
      from the tokens — stone surfaces, white cards, ink sidebar,
      gold as THE accent (spec 11.6). No Playfair in admin.
   ============================================================ */
@import url('../nailounge-new/colors_and_type.css?v=c37930a3');

/* Mau rieng cua admin (bang mau thuong hieu trong colors_and_type.css khong co).
   To A/B dung o Lich lam viec; hai mau nay khong dung o dau khac. */
:root {
  /* Mau nhom dich vu. Truoc 10.09 chi khai trong khung bang lich; dua len day de
     phieu cu o man thanh toan to cung mot mau, khong chep ma mau ra cho thu hai. */
  --pool-chan: #7DCFE8;
  --pool-tay: #F3C0D3;
  --pool-mi: #C9B8A8;
  --team-a:     #8FBF9F;
  --team-a-ink: #3B6D11;
  --team-b:     #E07A3F;
  --team-b-ink: #8F3B10;
  /* Nghi phep (dovolena) o Lich lam viec — xanh xam, khac han vang/do dang dung. */
  --leave:      #7B8AA6;
  --leave-ink:  #3E4A62;
  --leave-soft: #EDF0F6;
  --ok-bg: #EAF3DE;
  --ok-line: #3B6D11;
  --ok-ink: #173404;
  --danger-bg: #FCEBEB;
  /* Cot tho khop o "Tim tho" cua Bang luot. Vang nhat hon --gold-soft: ca cot
     bi to nen, so tien 13px trong cot phai con doc duoc tu xa. */
  --tb-hit:   #FCF3DC;
  --tb-hit-2: #F6EBD2;
  --tb-last: #FFF1E3;
  --tb-last-ink: #C2661B;
}

/* ============================================================
   COPIED RECIPES — VERBATIM from nailounge-new/css/site.css
   (.btn base+gold+outline, .field, .choice, .slot[-grid],
    .daychip[s], .search-input). Do not edit here.
   ============================================================ */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-label);font-size:13px;letter-spacing:.12em;text-transform:uppercase;border-radius:999px;padding:15px 30px;border:none;cursor:pointer;font-weight:600;transition:all .22s cubic-bezier(.22,.61,.36,1);white-space:nowrap;text-decoration:none}
.btn:active{transform:scale(.98)}
.btn--gold{background:var(--gold);color:#fff;box-shadow:0 0 0 4px var(--gold-soft)}
.btn--gold:hover{background:var(--gold-bright);color:#fff;box-shadow:0 0 0 4px var(--sand)}
.btn--outline{background:transparent;color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.btn--outline:hover{background:var(--ink);color:#fff}
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.field label{font-family:var(--font-label);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.field input,.field select,.field textarea{font-family:var(--font-body);font-size:15px;color:var(--ink);background:#fff;border:1px solid var(--hairline-2);border-radius:12px;padding:14px 16px;outline:none;transition:border-color .2s}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold)}
.field textarea{resize:vertical;min-height:120px}
/* Hop ghi chu nhan dang khach dang cho: le tan go trong luc dang dung o quay nen
   chu phai to hon mac dinh cua .field (nhac 11px, o nhap 15px). Chi phong to
   trong dung hop nay, khong dung .field o cho khac. */
.slot{padding:12px;border-radius:10px;border:1px solid var(--hairline-2);background:#fff;font-family:var(--font-body);font-size:14px;color:var(--ink-2);cursor:pointer;text-align:center;transition:all .18s}
.slot:hover{border-color:var(--gold)}
.slot.sel{border-color:var(--gold);background:var(--gold-soft);color:#7d6017}
.slot.off{opacity:.38;cursor:not-allowed;text-decoration:line-through}

/* ---------- base / app frame ---------- */
* { box-sizing: border-box; }
/* touch-action: manipulation = bo rieng cu chi "bam dup de phong to" tren man cam ung.
   Van giu: keo 1 ngon de cuon, va 2 ngon (pinch) de phong to / thu nho.
   Dat o goc html/body vi trinh duyet lay GIAO cua touch-action tren ca chuoi cha:
   moi phan tu con deu mat bam-dup, con cho nao khai chat hon (none / pan-y cho keo tha)
   thi van giu nguyen. Repo khong co handler dblclick nao nen khong mat chuc nang. */
html, body { height: 100%; margin: 0; overscroll-behavior-x: none; touch-action: manipulation; }
body.nla-app {
  display: grid;
  grid-template-columns: 236px 1fr;
  background: var(--stone);
  overflow: hidden;
}

/* ---------- sidebar: the ONLY dark surface (ink + gold) ---------- */
#nla-sidebar {
  display: flex;
  flex-direction: column;
  background: var(--ink);
  color: var(--stone-3);
  height: 100vh;
  padding: var(--space-5) 0 var(--space-4);
}
.nla-brand { padding: 0 var(--space-4) var(--space-5); text-align: center; }
/* logo mark (loga khong chu): the asset ships gray; brighten it to porcelain so it reads on
   the ink sidebar. currentColor is not available for <img>, hence the filter. The SVG is a
   512x512 square with a wide ellipse in the middle band (transparent padding top/bottom), so we
   size it wide + center it above the wordmark, with a negative margin to soak the bottom gap. */
.nla-brand__mark {
  display: block;
  width: 118px;
  height: auto;
  margin: 0 auto -14px;
  filter: brightness(0) invert(1);
  opacity: .92;
}
.nla-brand__name {
  display: block;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 24px;
  letter-spacing: .08em;
  color: var(--porcelain);
}
.nla-brand__sub {
  display: block;
  margin-top: var(--space-1);
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold-bright);
}
/* thanh tren (man hep): cung luat - logo brand thay logo-mark + chu nailounge */
#nla-sidebar .nla-lang__label {
  display: block;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--concrete-lt);
  margin-bottom: var(--space-2);
}
#nla-sidebar .nla-lang select {
  width: 100%;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--porcelain);
  color-scheme: light;
  background: color-mix(in srgb, var(--porcelain) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--porcelain) 22%, transparent);
  border-radius: var(--r-sm);
  padding: var(--space-2) var(--space-3);
  outline: none;
}
#nla-sidebar .nla-lang select option, #nla-sidebar .nla-lang select optgroup {
  color: #111;
  background: #fff;
}
#nla-sidebar .nla-lang select:focus { border-color: var(--gold); }
/* min-height:0 lets this flex child shrink below its content height so it can
   scroll; without it, 15 nav items (head menu) overflow 100vh and shove the
   account/logout block off-screen with no way to reach the lower items. */
.nla-nav {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: var(--space-1); padding: 0 var(--space-3);
  scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--porcelain) 24%, transparent) transparent;
}
.nla-nav::-webkit-scrollbar { width: 6px; }
.nla-nav::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--porcelain) 22%, transparent); border-radius: 3px; }
.nla-nav a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3);
  border-left: 2px solid transparent;
  border-radius: var(--r-xs);
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--stone-3);
  transition: color .18s ease, background .18s ease;
}
.nla-nav a:hover { color: var(--porcelain); background: color-mix(in srgb, var(--porcelain) 7%, transparent); }
.nla-nav a.active { color: var(--gold-bright); border-left-color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, transparent); }
.nla-nav__badge {
  margin-left: auto;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--porcelain);
  font-size: 11px;
}
/* nav tail: NGON NGU + DANG XUAT ride INSIDE the scroller, right under the last
   page link. Only the account identity stays pinned at the bottom, so the page
   list gets the height those two used to hold. Padding matches a nav link's own
   12px so labels line up on the same 24px rail as CHI NHANH / TAI KHOAN. */
.nla-nav__tail { margin-top: var(--space-4); padding: 0 var(--space-3); }
.nla-nav__tail .nla-logout { margin: var(--space-2) 0 0; }

/* account block: the ONLY pinned thing at the sidebar bottom (".nla-nav { flex: 1 }"
   pushes it down) — same label idiom as the CHI NHÁNH block. The hairline says
   "this row does not scroll". */
.nla-account {
  margin: var(--space-2) var(--space-3) 0;
  padding: var(--space-3) var(--space-3) 0;
  border-top: 1px solid color-mix(in srgb, var(--porcelain) 12%, transparent);
}
.nla-account__label {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--concrete-lt);
  margin-bottom: var(--space-2);
}
.nla-account__email {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--porcelain);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nla-account__role { font-family: var(--font-body); font-size: 12px; color: var(--concrete-lt); margin-top: 2px; }

.nla-logout {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-4) var(--space-3) 0;
  padding: var(--space-3);
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--concrete-lt);
  transition: color .18s ease;
}
.nla-logout:hover { color: var(--porcelain); }

/* ---------- main column ---------- */
.nla-main { display: flex; flex-direction: column; height: 100vh; overflow: hidden; overscroll-behavior-x: none; }
#nla-view { flex: 1; overflow: auto; padding: var(--space-6); overscroll-behavior-x: none; }
.nla-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-8) var(--space-6);
  color: var(--ink-3);
}
.nla-placeholder p { margin: 0; font-size: 15px; color: var(--ink-3); }
/* Goc TRAI duoi: phieu nhac thanh toan (.nla-payrem) chiem goc phai duoi va
   toast co z-index cao hon nen hai cai de len nhau. */
#nla-toast-root {
  position: fixed;
  left: var(--space-5);
  /* Bang lich hen dat --nla-toast-bottom khi co hop "vua bao di an" cung goc trai duoi:
     toast nhay len TREN chong hop thay vi de len hop (Hai chon cach A, 11.09). */
  bottom: var(--nla-toast-bottom, var(--space-5));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  z-index: 1000;
}
.nla-toast {
  background: var(--surface);
  color: var(--ink-2);
  border-left: 3px solid var(--gold);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-md);
  font-family: var(--font-body);
  font-size: 14px;
  padding: var(--space-3) var(--space-4);
  max-width: 360px;
  cursor: pointer;
  animation: nla-toast-in .22s cubic-bezier(.22,.61,.36,1);
}
.nla-toast--ok { border-left-color: var(--success); }
.nla-toast--error { border-left-color: var(--danger); }
/* 548 B3-C: "viec da xep hang" — khong phai loi, nhung khong phai xong. */
.nla-toast--warn { border-left-color: #C98A1B; }
.nla-toast .nla-spinner { width: 12px; height: 12px; margin-right: 2px; }
/* Bao loi 2 dong (Hai duyet mockup 24.09): dam = chuyen gi, thuong = lam gi tiep,
   nho xam = ma loi. Dung bien san, khong them mau moi. */
.nla-toast--rich { display: flex; flex-direction: column; gap: 3px; line-height: 1.4; }
.nla-toast__what { color: var(--ink); font-weight: 600; }
.nla-toast__do { color: var(--ink-2); }
.nla-toast__meta { color: var(--ink-3); font-size: 12px; font-variant-numeric: tabular-nums; }
/* Cung 3 dong do nhung nam TRONG popup/form (NLA.errorInto, vong 4 24.09). */
.nla-toast--action { cursor: pointer; }
.nla-toast--action:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* Bam chip co ten tho = tao lich luon (Hai 07.11): chu "Hoan tac" cuoi thong bao. */
.nla-toast__undo { margin-left: var(--space-3); font-weight: 700; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); }
@keyframes nla-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- modal ---------- */
.nla-modal-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--ink) 45%, transparent);
  z-index: 900;
  padding: var(--space-5);
}
.nla-modal {
  position: relative;
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 520px;
  max-height: 86vh;
  overflow: auto;
  padding: var(--space-6);
  animation: nla-modal-in .22s cubic-bezier(.22,.61,.36,1);
}
.nla-modal__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 24px;
  color: var(--fg1);
  margin: 0 0 var(--space-4);
}
.nla-modal--has-close .nla-modal__title {
  padding-right: calc(44px + var(--space-2));
}
.nla-modal--has-close > .nla-modal__body:first-child {
  min-height: 44px;
  padding-right: calc(44px + var(--space-2));
}
.nla-modal__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  display: inline-grid;
  width: 44px;
  height: 44px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
}
.nla-modal__close:hover {
  background: var(--gold-soft);
  color: var(--ink);
}
.nla-modal__close:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.nla-modal__body { font-family: var(--font-body); font-size: 15px; color: var(--ink-2); }
/* Ghi chu duoi hang nut: noi ro nut chinh lam gi, chu nho mau nhat de khong
   canh tranh voi nut. */
.nla-modal__actions-note {
  width: fit-content;
  max-width: 100%;
  margin: var(--space-3) 0 0 auto;
  padding: 9px 14px;
  border-radius: var(--r-sm);
  background: var(--gold-soft);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink-2);
  text-align: right;
}
.nla-modal__actions {
  display: flex;
  flex-wrap: wrap;                 /* long labels ("Huỷ lịch cũ + Tạo lịch mới") drop a row
                                      instead of pushing the row past the card edge */
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
/* Hop canh bao mat luot: hai lua chon "gan" chi khac nhau vai chu, ma bam nham la mot tho
   mat luot oan. Xep doc, nut to het chieu ngang de kho truot tay tren may tinh bang. */
.nla-btn--quiet {
  background: transparent; color: var(--ink-3); box-shadow: none;
}
.nla-btn--quiet:hover { background: var(--stone); color: var(--ink-2); box-shadow: none; }
.nla-btn--danger { color: var(--danger); box-shadow: 0 0 0 1px var(--danger); }
.nla-btn--danger:hover { background: var(--danger); color: var(--porcelain); box-shadow: 0 0 0 1px var(--danger); }
@keyframes nla-modal-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }

/* ---------- spinner ---------- */
.nla-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--stone-3);
  border-top-color: var(--gold);
  border-radius: var(--r-pill);
  animation: nla-spin .7s linear infinite;
  vertical-align: middle;
}
@keyframes nla-spin { to { transform: rotate(360deg); } }

/* ---------- config-placeholder banner (auth.js guard) ---------- */
.nla-config-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2000;
  background: var(--danger);
  color: var(--porcelain);
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .04em;
  text-align: center;
  padding: var(--space-4);
}
/* retry button inside the boot-error banner (auth.js transportBanner) */
.nla-config-banner__retry {
  margin-left: var(--space-4);
  color: var(--porcelain);
  border-color: var(--porcelain);
}

/* ---------- login page ---------- */
body.nla-login {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--stone);
  padding: var(--space-5);
}
.nla-login-card {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-7) var(--space-6);
}
.nla-login-mark { display: block; margin: 0 0 var(--space-4); }
.nla-login-card .eyebrow { margin-bottom: var(--space-3); }
.nla-login-card h1 { margin-bottom: var(--space-5); font-size: 30px; }
.nla-login-card .btn { width: 100%; justify-content: center; margin-top: var(--space-2); }
.nla-login-card .nla-lang {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--stone-line);
}
.nla-login-card .nla-lang__label {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--ink-3);
  font-family: var(--font-label);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.nla-login-card .nla-lang select {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  color: var(--ink);
  color-scheme: light;
  background: var(--surface);
  border: 1px solid var(--hairline-2);
  border-radius: var(--r-sm);
  outline: none;
  font-family: var(--font-body);
  font-size: 14px;
}
.nla-login-card .nla-lang select:focus { border-color: var(--gold); }
.nla-login-error { color: var(--danger); font-size: 14px; margin: var(--space-3) 0 0; }
/* Chip "gio som nhat" mang ten tho: mot dong cho 1 khach, xep chong khi nhom. */
[data-wf-earliest-slot] .slot { text-align: left; }
/* 10.10.2026 (Hai): dong bao "tiem ben con cho" (thay nut xin cho) nam trong khoi duoi chip,
   dung chung dang hop vang nay. */
[data-wf-seat-note] b, [data-wf-group-seat-info] b, [data-cb-seat-info] b { color: var(--ink); font-weight: 600; }
/* Vach ke ngan hang nguy hiem. Border-top chi dai bang mot cot, nen ke bang pseudo
   keo sang het cot 2 (rong 100% + gap), giong cach popup hoa don lam. */
[data-rs-chain], [data-segment-order-chain] {
  display: grid; justify-items: start; gap: 4px; margin-top: 2px;
}
/* display:grid manh hon display:none cua thuoc tinh hidden, nen phai noi ro:
   thieu dong nay thi mo "Sua chi tiet" van thay thanh chuoi o the tom tat. */
[data-rs-chain][hidden] { display: none; }
[data-rs-chain] { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--stone-line); }
/* Nhan nho tach khoi chu gach ngang cua dich vu dang cho bo. */
[data-edit-service][aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
[data-rs-original-remove-warning] {
  margin-top: 8px; padding: 8px 12px; border: 0; border-left: 3px solid var(--gold);
  border-radius: 0; background: #FBF6E9; font-size: 12px; color: var(--ink-2); line-height: 1.5;
}
/* Hai nut "Da xong 1/2" va "Ra hoa don" la hai cau tra loi cho cung mot cau hoi:
   ai lam dich vu tiep theo. Moi nut nam trong mot khung nen rieng cung cau huong
   dan cua no, de mat gom "chu + nut" thanh MOT lua chon. Ban cu de cau huong dan
   tran giua hai nut nen doc luot la truot mat. */
[data-prebill-group] {
  width: 100%; min-width: 0; justify-content: center; text-align: center; white-space: normal;
}
/* Hoi pham vi huy nhom, giu cung khach noi bat. */
.nla-btn--danger-fill, .nla-btn--danger-fill:hover {
  background: var(--danger); border-color: var(--danger); color: #fff;
}
/* O ngay, o gio va nut Bay gio cung chieu cao voi cac input lon trong popup. */
@media (max-width: 480px) {
}
/* Dong tinh trang TIEM BEN ngay duoi tieu de hop muon. Cham xanh = ben do
   dang co tho ranh; cham xam = chua co. Dang tai thi bo vien vien pill. */
@keyframes nla-lunch-blink { 0%, 100% { box-shadow: 0 0 0 3px var(--gold), 0 8px 24px -12px rgba(33,29,25,.3); } 50% { box-shadow: 0 0 0 3px transparent, 0 8px 24px -12px rgba(33,29,25,.3); } }

/* shared white panel */
.nla-panel {
  background: var(--porcelain);
  border: 1px solid var(--stone-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
}

/* ================= Service duration matrix ================= */

@media (min-width: 901px) {
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .nla-toast, .nla-modal { animation: none; }
  .btn { transition: none; }
}

/* dvh corrections: iOS Safari 100vh overshoots by the URL bar; the
   second declaration wins where dvh is supported, vh is the fallback */
.nla-main { height: 100dvh; }
#nla-sidebar { height: 100dvh; }
.nla-modal { max-height: 86dvh; }
body.nla-login { min-height: 100dvh; }

/* topbar + scrim exist in the markup at every width; mobile-only display */
.nla-topbar { display: none; }
.nla-scrim { display: none; }

@media (max-width: 900px) {
  body.nla-app { grid-template-columns: 1fr; }

  /* ---------- mobile topbar (hamburger) ---------- */
  .nla-topbar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: none;
    min-height: 56px;
    padding: 0 var(--space-3);
    background: var(--ink);
    color: var(--porcelain);
  }
  .nla-topbar__menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    background: none;
    color: var(--porcelain);
    cursor: pointer;
    border-radius: var(--r-xs);
  }
  .nla-topbar__menu:active { background: color-mix(in srgb, var(--porcelain) 12%, transparent); }
  .nla-topbar__mark { flex: none; filter: brightness(0) invert(1); opacity: .92; }
  .nla-topbar__brand {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 18px;
    letter-spacing: .08em;
  }
  /* visibility swap keeps the closed drawer out of the tab order
     (CSS-only a11y; the 0s visibility transition is delayed so the
     slide-out finishes before the element vanishes) */
  #nla-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 236px;          /* nav/account metrics are tuned for 236px */
    max-width: 84vw;
    z-index: 1200;         /* above toast 1000/pop 950/modal 900; below config-banner 2000 */
    overflow-y: auto;      /* logout must stay reachable in landscape */
    overscroll-behavior: contain;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform .22s cubic-bezier(.22,.61,.36,1), visibility 0s .22s;
  }
  body.nla-nav-open #nla-sidebar {
    transform: none;
    visibility: visible;
    transition: transform .22s cubic-bezier(.22,.61,.36,1);
    box-shadow: var(--shadow-dark);
  }
  .nla-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1190;
    background: color-mix(in srgb, var(--ink) 45%, transparent);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
  }
  body.nla-nav-open .nla-scrim { opacity: 1; pointer-events: auto; }
  body.nla-nav-open #nla-view { overflow: hidden; }

  /* ---------- frame density ---------- */
  #nla-view { padding: var(--space-4); }
  .nla-panel { padding: var(--space-4); border-radius: var(--r-md); }
  .nla-placeholder { padding: var(--space-6) var(--space-4); }

  /* iOS auto-zooms the page when a focused control is under 16px;
     the .field/.search-input recipes are verbatim-copied, so the
     override lives here instead of editing them */
  .field input, .field select, .field textarea { font-size: 16px; }

  /* ---------- toasts: full-width, above the home indicator ---------- */
  #nla-toast-root {
    left: var(--space-3);
    right: var(--space-3);
    bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  }
  .nla-toast { max-width: none; }

  /* ---------- modal: top-anchored scrollable overlay (soft keyboard
     keeps the title + focused field visible), wrap-able actions ---------- */
  .nla-modal-overlay { padding: var(--space-3); align-items: flex-start; overflow: auto; }
  .nla-modal { margin: var(--space-4) auto; padding: var(--space-5) var(--space-4); max-height: none; }
  .nla-modal__actions { flex-wrap: wrap; }
  .nla-modal__actions .btn { flex: 1 1 auto; justify-content: center; padding: 13px 18px; }
}

@media (max-width: 480px) {
  #nla-view { padding: var(--space-3) var(--space-2) var(--space-5); }
}

@media (prefers-reduced-motion: reduce) {
  #nla-sidebar, .nla-scrim { transition: none; }
}
/* Forced gate: collapse the whole shell — an empty #nla-sidebar is still a 236px dark slab. */
body.nla-password-gated { display: block; }
body.nla-password-gated #nla-sidebar,
body.nla-password-gated .nla-topbar,
body.nla-password-gated #nla-scrim { display: none; }
.nla-pwpage { max-width: 420px; margin: 0 auto; padding: var(--space-8) var(--space-5); }
/* dvh, not vh — same correction as body.nla-login (see the dvh block above): iOS Safari
   100vh overshoots by the URL bar, which would push the submit button under the fold on
   the one screen a pending manager cannot get past. vh stays as the fallback. */
.nla-pwpage--forced { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; }
.nla-pwform { display: flex; flex-direction: column; gap: var(--space-4); width: 100%; }
.nla-pwform__intro { font-family: var(--font-body); font-size: 14px; line-height: 1.6;
  color: var(--ink-3); margin: 0; }
.nla-pwform__error { color: var(--danger); font-size: 14px; margin: 0; }
/* min-height 44px: repo-wide touch-target floor (see the mobile layer — .nla-db__apptrow,
   .nla-sc__capacity .btn). A bare underlined text button is otherwise
   ~17px tall and near-untappable on a phone. */
.nla-pwpage__logout { margin-top: var(--space-5); background: none; border: 0;
  color: var(--ink-3); text-decoration: underline; cursor: pointer; font: inherit;
  min-height: 44px; padding: var(--space-2) var(--space-4); }
/* Confirmations are NOT errors: #fg-note ("link sent") and the reset success line must not
   render in --danger red, which reads as failure at the exact moment things went right. */
.nla-login-note { color: var(--ink-3); font-size: 14px; margin: var(--space-3) 0 0; }
.nla-login-note--ok { color: var(--success); }
.nla-login-intro { font-family: var(--font-body); font-size: 14px; line-height: 1.6;
  color: var(--ink-3); margin: 0; }

/* ===== voice booking (walk-in form) ===== */
@keyframes nla-voice-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(179, 38, 30, .28); }
  50% { box-shadow: 0 0 0 6px rgba(179, 38, 30, 0); }
}

/* ===== dashboard attention popover ===== */

.nla-nav__badge { box-shadow: 0 0 0 2px var(--ink); }

/* ============================================================
   Price list (nla-pl) — redesign 2026-07-21 (token-only)
   ============================================================ */

.nla-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }

/* 792 Lich su sua Bang gia (price-log.js) */

.nla-switch { position: relative; display: inline-block; width: 38px; height: 22px; cursor: pointer; }
.nla-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.nla-slider { position: absolute; inset: 0; background: var(--stone-line-2); border-radius: 999px; transition: background .16s; }
.nla-slider::before { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--porcelain); transition: transform .16s; }
.nla-switch input:checked + .nla-slider { background: var(--gold); }
.nla-switch input:checked + .nla-slider::before { transform: translateX(16px); }
.nla-switch input:disabled + .nla-slider { opacity: .5; }
.nla-switch input:focus-visible + .nla-slider { box-shadow: 0 0 0 3px var(--gold-soft); }

@media (min-width: 901px) {
}
/* POS v2 */
.pos {
  --pos-col-gap: var(--space-3);
  --pos-bill-col-min: 320px;
  --pos-bill-col-size: 34fr;
  --pos-menu-col-size: 66fr;
  display: flex; min-width: 0; flex-direction: column; gap: var(--space-3); padding-bottom: calc(70px + env(safe-area-inset-bottom));
}
/* Dong "Ra truc tiep · QL · Ly do" o chi tiet hoa don (invoice-view + Tong ket). */
@keyframes pos-warn { 50% { transform: translateX(3px); } }
/* Co nut TRA TRUOC (bill tu lich hen) thi 3 cot deu nhau; chu ha mot nac de 3 nhan
   viet hoa khong tran khoi pill o cot bill toi thieu 320px (iPad doc). */
.pos-bottom-dock { position: fixed; right: 0; bottom: 0; left: 0; z-index: 110; display: grid; grid-template-columns: minmax(0, 1fr) auto auto 44px; gap: var(--space-2); align-items: center; min-height: 55px; box-sizing: content-box; padding: 7px var(--space-3); padding-bottom: calc(7px + env(safe-area-inset-bottom)); border-top: 1px solid var(--hairline-2); background: var(--surface); box-shadow: var(--shadow-md); }
.pos-bottom-dock .btn { min-height: 46px; justify-content: center; padding: 0 12px; font-size: 11px; letter-spacing: .06em; }
.pos-bottom-dock .btn:hover { filter: brightness(.96); transform: translateY(-1px) scale(1.02); }
/* DP "So khac" (763): dong so ca hang duoi menh gia, la dich cua ban phim so (nhu Khach dua) */
[data-pos-cashbook] { position: relative; }
/* Dong tien giam that, nam duoi con so vua go trong modal Giam gia. */
[data-pos-cashbook] { border-color: var(--gold); background: var(--gold-soft); color: var(--ink); }

/* Shared title/fullscreen seam for every menu view outside the three legacy fullscreen views. */
.nla-view-titlebar { display: flex; min-width: 0; align-items: center; gap: var(--space-3); }
.nla-view-titlebar [data-nla-view-fullscreen] {
  display: inline-grid; width: 44px; min-width: 44px; height: 44px; min-height: 44px;
  flex: 0 0 44px; justify-content: center; padding: 0; place-items: center;
}
.nla-view-titlebar [data-nla-view-fullscreen] svg { display: block; }

@media (min-width: 901px) {
  /* Toast neo vao goc trai duoi cua VUNG NOI DUNG, khong phai cua man hinh:
     cot menu toi 236px nam ben trai, toast dat sat le man hinh se lan vao do.
     Cac che do toan man hinh an cot menu nen tra toast ve le man hinh. */
  body.nla-app #nla-toast-root { left: calc(236px + var(--space-5)); }
  body.nla-app.nla-view-full #nla-toast-root,
  body.nla-app.nla-pos-full #nla-toast-root,
  body.nla-app.nla-cb-full #nla-toast-root,
  body.nla-app.nla-tb-full #nla-toast-root { left: var(--space-5); }
  body.nla-app.nla-pos-full { grid-template-columns: 1fr; }
  body.nla-app.nla-pos-full #nla-sidebar { display: none; }
  body.nla-app.nla-cb-full { grid-template-columns: 1fr; }
  body.nla-app.nla-cb-full #nla-sidebar { display: none; }
  body.nla-app.nla-tb-full { grid-template-columns: 1fr; }
  body.nla-app.nla-tb-full #nla-sidebar { display: none; }
  body.nla-app.nla-view-full { grid-template-columns: 1fr; }
  body.nla-app.nla-view-full #nla-sidebar { display: none; }
}

@media (min-width: 768px) {
  .pos { height: 100%; min-height: 0; padding-bottom: 0; }
  .pos-bottom-dock { display: none; }
}
/* Mot nut luu duy nhat o chan modal — hai dong nay la tin hieu duy nhat trong than. */
.nla-modal__actions .btn[hidden] { display: none; }
/* Vach ngan hang xep luot Masaze: nhom nay chay so thu tu rieng nen phai thay ro
   cho no bat dau, ke ca khi keo ngang qua nhieu tho. */
[data-cb-strip-more] { flex: 0 0 auto; color: var(--ink-3); }
[data-cb-strip-more] svg { flex: 0 0 auto; transition: transform .16s ease; }
[data-cb-strip-more][aria-expanded="true"] svg { transform: rotate(180deg); }

/* Capacity board timeline */
[data-cb-walkin-slot] { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-4); }
/* Chip nhay: cung ly do voi span state-pulse cua o (03.09) — animate box-shadow tren
   chinh chip la tinh lai style + ve lai moi frame, du chi 2 chip cung ton ~200 ms
   style + ~600 ms paint moi 4 giay khi bang dung yen. Chip giu vong tinh (trang thai
   0%), vong dam hon (trang thai 50%) nam o ::after va chi animate opacity. */
@keyframes nla-cb-chip-pulse {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}
/* Muc A1: nut buoc ngay nho hon o ngay (36px, khung om sat mui ten) nhung van du
   rong de bam trung tren iPad. Ngay xua cho la day 7 chip .daychip full width. */
@media (max-width: 900px) {
}
/* Vong nhap nhay cua o tre gio / cho / chua thu tien. Truoc 03.09 moi o tu
   animate `box-shadow` ngay tren o: box-shadow khong len duoc compositor, nen
   ~100 o dang nhay ep trinh duyet tinh lai style + ve lai MOI FRAME — do tren
   snapshot 2.5k lich: bang dung yen van ton ~80% luong chinh (115 lan tinh lai
   style/4s, 580 phan tu moi lan), cuon rot xuong 30 fps, re chuot moi lan ~75 ms.
   Khung hinh dam nam tren mot span con chi animate `opacity` (compositor-only):
   cung thi nghiem do -> 0 lan tinh lai style, cuon 60 fps. JS (barHtml trong
   capacity-board js) chen span nay cho dung 5 trang thai; mau lay tu
   --cb-state-color cua chinh o. Quang ngoai 8px ve lai nho overflow-clip-margin
   10px tren rieng cac o nhay; z-index 0 de nam TREN nen (::before) va DUOI chu
   (bar-line z-index 1).
   CHI VE QUANG NGOAI, KHONG ve vong inset. Truoc 03.09 khung hinh cu co ca
   `inset 0 0 0 5px`, nhung no nam tren chinh o nen bi lop nen ::before (dat o
   z-index 0, TREN nen cua o) che kin — nguoi dung chua bao gio thay vong do.
   Span nay nam TREN ::before, nen neu ve inset thi vong day lo ra ben trong o,
   goc trong bi vuong sac canh (radius 4px - 5px < 0). Hai bat loi 04.09.
   KHONG dat animation box-shadow tro lai o, KHONG dua box-shadow vao keyframes.
   DUNG viet ten class co dau cham trong chu thich nay (ruleBody() cua test CSS
   bat nham). */
@keyframes nla-cb-state-pulse {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}
/* Dung them luat cho `.nla-cb__bar--paid .nla-cb__service-done-note`: nhan
   "chua thanh toan" chi in ra khi `arrival.finished`, ma `finished` doi
   `unbilled` — o da co hoa don thi khong bao gio dat nhan nay. Hai lop khong
   the cung ton tai, luat viet ra la luat chet. */
@keyframes nla-arrival-button-pulse {
  0%, 100% { box-shadow: 0 0 0 2px color-mix(in srgb, #d97706 32%, transparent); }
  50% { box-shadow: 0 0 0 6px color-mix(in srgb, #d97706 12%, transparent); }
}
@keyframes nla-cb-selected-state-pulse {
  0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--cb-state-color) 75%, transparent); }
  50% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--cb-state-color) 30%, transparent); }
}
@keyframes nla-cb-selected-state-outer-pulse {
  0%, 100% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--cb-state-color) 75%, transparent); }
  50% { box-shadow: 0 0 0 15px color-mix(in srgb, var(--cb-state-color) 30%, transparent); }
}
@keyframes nla-cb-search-preview-in {
  0% { box-shadow: 0 0 0 14px color-mix(in srgb, var(--ink) 48%, transparent), 0 5px 24px color-mix(in srgb, var(--ink) 34%, transparent); }
  100% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--ink) 38%, transparent), 0 5px 20px color-mix(in srgb, var(--ink) 28%, transparent); }
}
/* Nhan "Dang cho" qua 5 phut phai DAP VAO MAT giua mot bang day o: vua mo dam
   (nhap nhay) vua toa vong do. Chi mot minh vong sang thi liec qua khong thay.
   04.09: vong do gio la mot quang TINH, chi con do mo nhap nhay. Truoc do
   keyframes nay cho vong no tu 1px ra 5px, tuc animate box-shadow: thu do
   khong len duoc compositor nen moi frame trinh duyet phai tinh lai style va
   ve lai. Do tren bang 144 o, 30 nhan nhap nhay, bang DUNG YEN 4 giay:
     nhu cu (opacity + box-shadow)   240 lan tinh lai style, 383 ms ve lai
     quang tinh + animate opacity      1 lan,                  0 ms
   Da thu doi mau sang rgba thuong de loai nghi color-mix: van 241 lan, tuc
   thu phat la chinh box-shadow. Cung khong dat vong vao mot the con nhu
   nla-cb-state-pulse duoc: nhan tren Bang lich hen co overflow hidden nen the
   con se bi cat mat vong, con box-shadow cua chinh no thi khong bi cat.
   DUNG dua box-shadow tro lai keyframes nay. */
@keyframes nla-accept-waiting-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}

/* Group walk-in members */
[data-segment-time-editor] > label { display: block; margin-bottom: var(--space-2); }
[data-segment-server-error] {
  margin: var(--space-2) 0 0; color: var(--danger); font-size: 13px; font-weight: 700;
}
[data-bundle-banner] {
  width: 100%; justify-content: flex-start; margin-bottom: var(--space-3);
  border-color: var(--danger); background: color-mix(in srgb, var(--danger) 7%, var(--porcelain));
  color: var(--danger); text-align: left; white-space: normal;
}
/* .btn dat display:inline-flex nen [hidden] mac dinh bi de — phai thang tay (bai hoc tab Doanh thu tho) */
[data-bundle-banner][hidden] { display: none; }
[data-bundle-lock][hidden] { display: none; }
/* Luu duoc mot phan: cau "da luu" xanh de phan biet voi phan hong ngay sau no. */
@keyframes nla-flash-outline {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  20%, 70% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 42%, transparent); }
}
/* ---- Form Tao/Sua lich vua mot man (Hai 08.11, Cach 1) ----
   Man 15,6" (khung trinh duyet ~1536x750): 1 khach, da chon dich vu, thay du toi nut
   "Tao lich hen" khong cuon. Giu co chu; bot khoang trong, o thap 44px, "Xem gio goi y"
   len dong tieu de "Gio som nhat", bo khung "Thong tin lien he", Thong tin rieng +
   Ghi chu chung mot hang. Man <= 900px giu bo cuc cu (khung nen tu cuon). */
@media (min-width: 901px) {
}

/* Bao co ban moi — index.html khong co ?v= nen tab mo san khong tu biet co deploy */
.nla-update {
  position: fixed; z-index: 90; bottom: var(--space-4); left: 50%; display: flex;
  align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3);
  border: 1px solid var(--gold); border-radius: var(--r-pill); background: var(--porcelain);
  box-shadow: 0 6px 20px rgb(0 0 0 / 12%); transform: translateX(-50%);
}
.nla-update__text { color: var(--ink); font-size: 13px; white-space: nowrap; }
.nla-update__btn { flex: 0 0 auto; }
.nla-update[hidden] { display: none; }
@media (max-width: 480px) {
  .nla-update { right: var(--space-3); left: var(--space-3); justify-content: space-between; transform: none; }
  .nla-update__text { white-space: normal; }
}

/* ---------- Phan hoi tieu cuc (mkt-feedback.js, plan 2026-11-04-canh-bao-phan-hoi Task 4, mockup 49). O dem + chip dung lai
   .nla-mk-stat / .nla-mk-chip cua man Marketing; phan rieng: bang dong, nhan muc, han, trang thai, khung chi tiet ben phai. ---------- */
.nla-nav__badge--alert { background: #B3261E; }
.nla-fb-card--red { border-color: #E3B4AC; background: #FFF7F5; }
.nla-fb-card--red .nla-mk-stat__value { color: #B3261E; }
.nla-fb__filters { display: flex; flex-direction: column; gap: var(--space-2); }
.nla-fb-lbl { color: var(--ink-3); font-size: 12px; }
.nla-fb-chip-n { padding: 0 6px; border-radius: var(--r-pill); background: var(--stone-2); font-size: 11px; }
.nla-mk-chip.is-on .nla-fb-chip-n { background: var(--porcelain); }
.nla-fb__wrap { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--space-3); align-items: start; }
.nla-fb-panel { overflow: hidden; padding: 0; }
.nla-fb-table { width: 100%; border-collapse: collapse; }
.nla-fb-table th {
  padding: 10px 12px; border-bottom: 1px solid var(--hairline); background: #FBF9F5; color: var(--ink-3);
  font-family: var(--font-label); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-align: left; text-transform: uppercase;
}
.nla-fb-table td { padding: 12px; border-bottom: 1px solid #EFEAE2; color: var(--ink); font-size: 13px; vertical-align: top; }
.nla-fb-table tr:last-child td { border-bottom: 0; }
.nla-fb-row { cursor: pointer; }
.nla-fb-row:hover td { background: #FFFCF4; }
.nla-fb-row.is-sel td { background: #FFFCF4; }
.nla-fb-row:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.nla-fb-sev { display: inline-block; padding: 2px 9px; border-radius: var(--r-pill); font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.nla-fb-sev--high { background: #FBE9E7; color: #8C1D18; box-shadow: inset 0 0 0 1px #E3B4AC; }
.nla-fb-sev--medium { background: #FFF4DC; color: #8A6100; }
.nla-fb-sev--low { background: var(--stone-2); color: var(--ink-2); }
.nla-fb-ch { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; }
.nla-fb-ico {
  display: inline-flex; flex: none; align-items: center; justify-content: center; width: 18px; height: 18px;
  border-radius: 5px; color: #fff; font: 700 11px/1 sans-serif;
}
.nla-fb-ico--google { background: #4285F4; }
.nla-fb-ico--facebook { background: #1877F2; }
.nla-fb-ico--instagram { background: linear-gradient(45deg, #F58529, #DD2A7B, #8134AF); }
.nla-fb-src { color: var(--ink-3); font-size: 12px; overflow-wrap: anywhere; }
.nla-fb-stars { color: var(--gold); letter-spacing: 1px; }
.nla-fb-stars i { color: #DDD3C4; font-style: normal; }
.nla-fb-who { font-weight: 600; }
.nla-fb-orig { color: var(--ink); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.nla-fb-vi { margin-top: 3px; padding-left: 8px; border-left: 2px solid var(--gold-soft); color: var(--ink-2); font-size: 12.5px; }
.nla-fb-backfill { display: inline-block; padding: 0 7px; border-radius: var(--r-pill); background: var(--stone-2); color: var(--ink-2); font-size: 11px; font-weight: 600; }
.nla-fb-due { font-weight: 700; white-space: nowrap; }
.nla-fb-due--over { color: #B3261E; }
.nla-fb-due--soon { color: #8A6100; }
.nla-fb-due--ok { color: var(--ok-line); }
.nla-fb-st { display: inline-block; padding: 2px 8px; border-radius: var(--r-sm); font-size: 12px; white-space: nowrap; }
.nla-fb-st--new { background: #FBE9E7; color: #8C1D18; }
.nla-fb-st--doing { background: var(--gold-soft); color: #7d6017; }
.nla-fb-st--done { background: var(--ok-bg); color: #27500A; }
.nla-fb-st__sub { margin-top: 4px; }
.nla-fb__more { margin-top: var(--space-2); text-align: center; }
.nla-fb-side {
  position: sticky; top: var(--space-3); padding: var(--space-4); border: 1px solid var(--stone-line); border-radius: var(--r-md);
  background: var(--porcelain); box-shadow: var(--shadow-sm);
}
.nla-fb-side__hint { margin: 0; color: var(--ink-3); font-size: 13px; }
.nla-fb-side__title { margin: 0 0 2px; color: var(--ink); font-family: var(--font-display); font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.nla-fb-side__meta { margin-bottom: 10px; color: var(--ink-3); font-size: 12px; }
.nla-fb-link { color: #7d6017; text-decoration: underline; white-space: nowrap; }
.nla-fb-link__arrow { vertical-align: -1px; }
.nla-fb-quote { padding: 10px; border: 1px solid var(--hairline); border-radius: 10px; background: #FBF9F5; font-size: 13px; overflow-wrap: anywhere; }
.nla-fb-ai { margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: #F7F3EA; color: var(--ink-2); font-size: 12.5px; }
.nla-fb-ai b { color: #7d6017; }
.nla-fb-field { margin-top: 12px; }
.nla-fb-field > label, .nla-fb-field__lbl {
  display: block; margin-bottom: 4px; color: var(--ink-3); font-family: var(--font-label); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
}
.nla-fb-select, .nla-fb-note {
  width: 100%; padding: 8px 10px; border: 1px solid var(--stone-line-2); border-radius: 10px; background: var(--porcelain);
  color: var(--ink); font: 13px var(--font-body);
}
.nla-fb-note { min-height: 56px; resize: vertical; }
.nla-fb-radios { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.nla-fb-radio { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.nla-fb-radio input { accent-color: var(--gold); margin: 0; }
.nla-fb-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.nla-fb-btn { padding: 9px 16px; font-size: 11.5px; letter-spacing: .08em; }
.nla-fb-btn.btn--gold { box-shadow: none; }
.nla-fb-hist { margin-top: 12px; padding-top: 8px; border-top: 1px dashed #DDD3C4; color: var(--ink-3); font-size: 12px; line-height: 1.7; }
.nla-fb-hist ul { margin: 0; padding: 0; list-style: none; }
.nla-fb-hist__wait { margin: 0; }
@media (max-width: 1100px) {
  .nla-fb__wrap { grid-template-columns: minmax(0, 1fr); }
  .nla-fb-side { position: static; }
}
/* Man Marketing an o dem duoi 900px (mockup 12); trang Phan hoi van giu 4 o (mockup 49). */
@media (max-width: 900px) {
  .nla-fb .nla-mk__stats.nla-fb__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .nla-fb__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nla-fb-table thead { display: none; }
  .nla-fb-table, .nla-fb-table tbody, .nla-fb-table tr, .nla-fb-table td { display: block; width: 100%; }
  .nla-fb-table tr.nla-fb-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px var(--space-2); padding: 10px 12px; border-bottom: 1px solid #EFEAE2; }
  .nla-fb-table tr.nla-fb-row td { width: auto; padding: 0; border: 0; background: transparent; }
  .nla-fb-table tr.nla-fb-row td:nth-child(3) { grid-column: 1 / -1; grid-row: 2; }
  .nla-fb-table tr.nla-fb-row.is-sel { background: #FFFCF4; }
}

/* ---------- man Marketing: duyet bai nhom Telegram (mkt-board.js, plan P3 2026-10-16) ---------- */
.nla-mk { display: flex; flex-direction: column; gap: var(--space-3); }
.nla-mk__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.nla-mk__title { margin: 0; color: var(--ink); font-family: var(--font-display); font-size: 1.6rem; font-weight: 400; }
.nla-mk__title-count { color: var(--ink-2); font-size: 1rem; }
.nla-mk__sub { margin: 2px 0 0; color: var(--ink-3); font-size: 13px; }
.nla-mk__filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.nla-mk__chips, .nla-mk-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.nla-mk__sep { width: 1px; height: 24px; background: var(--hairline-2); }
.nla-mk-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 6px 14px;
  border: 1px solid var(--hairline-2); border-radius: var(--r-pill); background: var(--porcelain);
  color: var(--ink); font-family: var(--font-body); font-size: 13px; line-height: 1.2; cursor: pointer;
}
.nla-mk-chip:hover:not(:disabled):not(.is-static) { border-color: var(--gold); }
.nla-mk-chip.is-on { border-color: var(--gold); background: var(--gold-soft); color: #7d6017; }
.nla-mk-chip:disabled { cursor: default; opacity: .55; }
.nla-mk-chip.is-static { cursor: default; }
.nla-mk-chip--add { border-style: dashed; }
.nla-mk__studio {
  padding: var(--space-2) var(--space-3); border: 1px solid var(--danger); border-radius: var(--r-sm);
  background: var(--danger-bg); color: var(--danger); font-size: 13px;
}
.nla-mk__studio--unknown { border-color: var(--hairline-2); background: var(--stone-2); color: var(--ink-2); }
.nla-mk__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.nla-mk-stat {
  padding: var(--space-3) var(--space-4); border: 1px solid var(--stone-line); border-radius: var(--r-md);
  background: var(--porcelain); box-shadow: var(--shadow-sm);
}
.nla-mk-stat__label { color: var(--ink-3); font-family: var(--font-label); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.nla-mk-stat__value { color: var(--ink); font-family: var(--font-display); font-size: 1.6rem; line-height: 1.3; }
.nla-mk-stat__sub { color: var(--ink-3); font-size: 12px; }
.nla-mk-stat--warn .nla-mk-stat__value { color: var(--danger); }
.nla-mk__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.nla-mk__main { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); }
.nla-mk__hint {
  margin: 0; padding: var(--space-2) var(--space-3); border: 1px solid #CFE6F5; border-radius: var(--r-sm);
  background: var(--web-blue-tint); color: #1F4E79; font-size: 12px;
}
.nla-mk-tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--hairline-2); }
.nla-mk-tab {
  margin-bottom: -1px; padding: var(--space-2) var(--space-4); border: 1px solid transparent;
  border-radius: var(--r-sm) var(--r-sm) 0 0; background: transparent; color: var(--ink-2);
  font-family: var(--font-body); font-size: 14px; cursor: pointer;
}
.nla-mk-tab.is-on { border-color: var(--hairline-2); border-bottom-color: var(--porcelain); background: var(--porcelain); color: var(--ink); font-weight: 600; }
.nla-mk-tab__count { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: var(--r-pill); background: var(--stone-2); font-size: 11px; text-align: center; }
.nla-mk-tab.is-on .nla-mk-tab__count { background: var(--gold-soft); }
.nla-mk-events { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.nla-mk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-3); }
.nla-mk-empty { padding: var(--space-6) var(--space-4); color: var(--ink-3); text-align: center; }
.nla-mk-card {
  display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--stone-line);
  border-radius: var(--r-md); background: var(--porcelain); cursor: pointer;
}
.nla-mk-card:hover { border-color: var(--gold); box-shadow: var(--shadow-md); }
.nla-mk-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* P5 (mockup 27): gio dang la tieu de the, "Bai #N · k anh" chu nho xam ngay duoi. */
.nla-mk-card__when { padding: var(--space-2) var(--space-3) 0; color: var(--ink); font-size: 14px; font-weight: 700; }
.nla-mk-card__no { padding: 0 var(--space-3) var(--space-2); color: var(--ink-3); font-size: 12px; }
.nla-mk-card__media { position: relative; aspect-ratio: 4 / 5; background: var(--stone-2); }
.nla-mk-card__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nla-mk-card__video {
  position: absolute; top: var(--space-2); left: var(--space-2); padding: 2px 8px; border-radius: var(--r-pill);
  background: rgba(33, 29, 25, .62); color: #fff; font-size: 11px; font-weight: 600;
}
.nla-mk-nav {
  position: absolute; top: 50%; display: inline-grid; width: 26px; height: 26px; place-items: center;
  border: 0; border-radius: 50%; background: rgba(255, 255, 255, .9); color: var(--ink);
  font-size: 18px; line-height: 1; cursor: pointer; transform: translateY(-50%);
}
.nla-mk-nav--prev { left: var(--space-2); }
.nla-mk-nav--next { right: var(--space-2); }
.nla-mk-dots { position: absolute; bottom: var(--space-2); left: 0; right: 0; display: flex; justify-content: center; gap: 4px; }
.nla-mk-dot { width: 6px; height: 6px; border: 1px solid #fff; border-radius: 50%; background: transparent; }
.nla-mk-dot.is-on { background: #fff; }
.nla-mk-media--loading, .nla-mk-media--empty { width: 100%; height: 100%; background: var(--stone-2); }
.nla-mk-media--failed {
  display: grid; width: 100%; height: 100%; padding: var(--space-2); place-items: center;
  background: var(--stone-2); color: var(--ink-3); font-size: 12px; text-align: center;
}
.nla-mk-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3) 0; }
.nla-mk-salon {
  padding: 1px 8px; border-radius: var(--r-pill); background: var(--ink); color: #fff;
  font-size: 11px; font-weight: 700;
}
.nla-mk-salon--none { border: 1px solid var(--danger); background: var(--danger-bg); color: var(--danger); font-weight: 600; }
/* Nhan caption (the) + dai caption (chi tiet): xanh = OK, vang = cho kiem / kiem lai, do = sua sau khi duyet. */
.nla-mk-cap { padding: 1px 8px; border-radius: var(--r-pill); background: var(--stone-2); color: var(--ink-2); font-size: 11px; }
.nla-mk-cap--ok { background: var(--ok-bg); color: var(--ok-ink); }
.nla-mk-cap--wait, .nla-mk-cap--recheck { background: var(--gold-soft); color: #7d6017; }
.nla-mk-card__cap {
  display: -webkit-box; margin: var(--space-2) var(--space-3) 0; overflow: hidden; color: var(--ink-2);
  font-size: 12px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 4;
}
.nla-mk-card__flags { display: flex; flex-wrap: wrap; gap: 4px; padding: var(--space-2) var(--space-3) 0; }
.nla-mk-card > :last-child { padding-bottom: var(--space-3); }
.nla-mk-card > .nla-mk-card__cap:last-child { margin-bottom: var(--space-3); padding-bottom: 0; }
.nla-mk-flag { display: inline-block; padding: 1px 6px; border-radius: var(--r-xs); background: var(--danger-bg); color: var(--danger); font-size: 11px; }
/* chi tiet bai */
.nla-modal.nla-mk-modal { max-width: 1180px; padding: var(--space-5); }
.nla-mk-d { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--space-5); }
.nla-mk-d__label { margin: var(--space-3) 0 var(--space-2); color: var(--ink-3); font-family: var(--font-label); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.nla-mk-d__left > .nla-mk-d__label:first-child { margin-top: 0; }
.nla-mk-d__ig { display: flex; gap: var(--space-2); overflow-x: auto; scroll-snap-type: x mandatory; }
.nla-mk-d__frame { position: relative; flex: 0 0 calc((100% - 2 * var(--space-2)) / 3); aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r-xs); background: var(--stone-2); scroll-snap-align: start; }
.nla-mk-d__frame--video { aspect-ratio: auto; }
.nla-mk-d__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nla-mk-d__frame--video .nla-mk-d__img, .nla-mk-d__fbcell--video .nla-mk-d__img { height: auto; max-height: 420px; object-fit: contain; background: #000; }
.nla-mk-d__idx { position: absolute; top: var(--space-2); right: var(--space-2); padding: 1px 6px; border-radius: var(--r-xs); background: rgba(33, 29, 25, .62); color: #fff; font-size: 11px; }
.nla-mk-d__fb { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 3px; aspect-ratio: 3 / 2; margin-bottom: var(--space-3); }
.nla-mk-d__fb--n1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.nla-mk-d__fb--n2 { grid-template-rows: 1fr; }
.nla-mk-d__fb--single { aspect-ratio: 4 / 5; max-width: 360px; }
.nla-mk-d__fbcell { position: relative; overflow: hidden; background: var(--stone-2); }
.nla-mk-d__fbcell--big { grid-row: 1 / -1; }
.nla-mk-d__more { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(33, 29, 25, .5); color: #fff; font-size: 24px; font-weight: 600; }
.nla-mk-d__warn { margin-top: var(--space-2); }
.nla-mk-corner { display: inline-flex; }
.nla-mk-corner--tl, .nla-mk-corner--br { transform: rotate(45deg); }
.nla-mk-corner--tr, .nla-mk-corner--bl { transform: rotate(-45deg); }
.nla-mk-tab svg, .nla-mk-chip svg, .nla-mk-d__learn svg, .nla-mk-capbar svg, .nla-mkc-st svg { vertical-align: -2px; }
.nla-mk-d__title { margin: 0; padding-right: 44px; color: var(--ink); font-family: var(--font-body); font-size: 20px; font-weight: 700; }
.nla-mk-d__sub { margin: 2px 0 var(--space-1); color: var(--ink-3); font-size: 13px; }
.nla-mk-capbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2);
  margin-bottom: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--r-sm);
  background: var(--stone-2); color: var(--ink-2); font-size: 13px;
}
.nla-mk-capbar--ok { background: var(--ok-bg); color: var(--ok-ink); }
.nla-mk-capbar--wait, .nla-mk-capbar--recheck { background: var(--gold-soft); color: #7d6017; }
.nla-mk-capbar__acts { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.nla-mk-capbar__tg { color: var(--web-blue-deep); font-weight: 600; text-decoration: none; white-space: nowrap; }
.nla-mk-capbar__tg:hover { text-decoration: underline; }
.nla-mk-d__page { margin-left: 6px; color: var(--ink-3); font-size: 13px; }
.nla-mk-d__unchecked { margin: var(--space-2) 0 0; color: #7d6017; font-size: 12px; }
/* Doi goc logo / do sang: giu anh dung cu mo di + mot cau o khung dau, tu hien anh moi (mkt-board.js checkRedraw). */
.nla-mk-d__frame.is-redraw .nla-mk-d__img { opacity: .45; }
.nla-mk-d__redraw {
  position: absolute; inset: 0; display: grid; padding: var(--space-3); place-items: center;
  background: rgba(33, 29, 25, .45); color: #fff; font-size: 13px; line-height: 1.4; text-align: center;
}
.nla-mk-d__ai { color: var(--ink-3); font-size: 11px; }
.nla-mk-d__status { margin: var(--space-2) 0; padding: var(--space-2) var(--space-3); border-radius: var(--r-sm); background: var(--stone-2); color: var(--ink-2); font-size: 13px; }
.nla-mk-d__status--ok { background: var(--ok-bg); color: var(--ok-ink); }
.nla-mk-d__status--bad { background: var(--danger-bg); color: var(--danger); }
.nla-mk-opts { display: flex; flex-direction: column; gap: var(--space-2); }
.nla-mk-opt { padding: var(--space-3); border: 1px solid var(--hairline-2); border-radius: var(--r-sm); background: var(--porcelain); }
.nla-mk-opt[data-mk-opt] { cursor: pointer; }
.nla-mk-opt.is-on { border-color: var(--gold); background: #FFFBF0; }
.nla-mk-opt.is-editing { border-width: 2px; border-color: var(--gold); }
.nla-mk-opt__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; }
.nla-mk-opt__dot { width: 10px; height: 10px; border: 1.5px solid var(--ink); border-radius: 50%; }
.nla-mk-opt.is-on .nla-mk-opt__dot { background: var(--ink); }
.nla-mk-opt__tag { color: var(--ink-3); font-size: 11px; }
.nla-mk-opt__edit { margin-left: auto; padding: 2px 6px; border: 0; background: transparent; color: #7d6017; font-size: 12px; cursor: pointer; }
.nla-mk-opt__text { margin: var(--space-1) 0 0; color: var(--ink-2); font-size: 13px; line-height: 1.5; white-space: pre-wrap; }
.nla-mk-opt__input { width: 100%; margin-top: var(--space-2); padding: var(--space-2) var(--space-3); border: 1px solid var(--hairline-2); border-radius: var(--r-sm); font: inherit; font-size: 13px; line-height: 1.5; resize: vertical; }
.nla-mk-opt__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-2); }
.nla-mk-opt__note { color: var(--ink-3); font-size: 11px; }
.nla-mk-btn { padding: 9px 18px; font-size: 12px; }
.nla-mk-d__learn { margin-top: var(--space-2); padding: var(--space-2) var(--space-3); border: 1px solid #CFE6F5; border-radius: var(--r-sm); background: var(--web-blue-tint); color: #1F4E79; font-size: 12px; }
.nla-mk-d__time { min-height: 34px; padding: 4px 10px; border: 1px solid var(--hairline-2); border-radius: var(--r-pill); font: inherit; font-size: 13px; }
.nla-mk-d__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.nla-mk-d__hold { margin: var(--space-2) 0 0; color: var(--danger); font-size: 12px; }
.nla-mk-d__bar .nla-mk-d__hold, .nla-mk-d__bar .nla-mk-d__unchecked { position: absolute; left: var(--space-3); right: var(--space-3); bottom: 100%; margin: 0; padding: var(--space-1) 0; background: var(--porcelain); text-align: center; }
.nla-mk-btn--reject-outline, .nla-mk-btn--reject {
  display: inline-flex; align-items: center; padding: 9px 18px; border-radius: var(--r-pill); font-family: var(--font-label);
  font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
}
.nla-mk-btn--reject-outline { border: 1px solid var(--danger); background: var(--danger-bg); color: var(--danger); }
.nla-mk-btn--reject { border: 0; background: var(--danger); color: #fff; }
.nla-mk-btn--reject:disabled, .nla-mk-btn--reject-outline:disabled { cursor: default; opacity: .45; }
.nla-mk-rj { margin-top: var(--space-3); padding: var(--space-3); border: 1px solid #E7B9A8; border-radius: var(--r-sm); background: #FDF6F2; }
.nla-mk-rj__head { margin-bottom: var(--space-2); font-size: 13px; }
.nla-mk-rj__head span { color: var(--ink-3); font-size: 11px; }
.nla-mk-rj__note { width: 100%; margin-top: var(--space-2); padding: var(--space-2) var(--space-3); border: 1px solid var(--hairline-2); border-radius: var(--r-sm); font: inherit; font-size: 13px; resize: vertical; }
.nla-mk-rj__bot { margin: var(--space-2) 0; color: var(--ink-3); font-size: 11px; }
.nla-mk-d__bar { display: none; }
/* P6 (mkt-calendar.js, mockup 30 + 31): luoi tuan / thang lich dang, bang Gio dang, lich dien thoai. Mau trang:
   Nailounge = muc, Jardin = nau, Bliss = vang (giong mockup 31). */
.nla-mkc { display: flex; min-width: 0; flex-direction: column; gap: var(--space-3); padding: var(--space-4); }
.nla-mkc__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.nla-mkc__nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.nla-mkc__range { font-size: 14px; }
.nla-mkc__arrow { padding: 6px 10px; }
.nla-mkc__cov { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.nla-mkc-cov {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--stone-line);
  border-radius: var(--r-sm); background: var(--ok-bg); color: var(--ok-ink); font-size: 12.5px;
}
.nla-mkc-cov.is-low { background: var(--danger-bg); color: var(--danger); }
.nla-mkc-dot { display: inline-block; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--ink); }
.nla-mkc-dot--jardin { background: var(--web-brown); }
.nla-mkc-dot--bliss { background: var(--gold); }
.nla-mkc-dot--empty { border: 1.5px solid var(--danger); background: transparent; }
.nla-mkc__error { padding: var(--space-2) var(--space-3); border-radius: var(--r-sm); background: var(--danger-bg); color: var(--danger); font-size: 13px; }
.nla-mkc__legend, .nla-mkc__note { margin: 0; color: var(--ink-3); font-size: 11.5px; line-height: 1.5; }
.nla-mkc-grid {
  display: grid; grid-template-columns: 150px repeat(7, minmax(0, 1fr)); overflow: hidden;
  border: 1px solid var(--stone-line); border-radius: var(--r-sm);
}
.nla-mkc-grid > div { min-width: 0; border-right: 1px solid var(--stone-line); border-bottom: 1px solid var(--stone-line); }
.nla-mkc-h { padding: 6px 4px; background: var(--stone); color: var(--ink); font-size: 12px; font-weight: 700; text-align: center; }
.nla-mkc-h.is-today { background: var(--gold-soft); color: #7d6017; }
.nla-mkc-rowh { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 6px 8px; background: var(--stone); color: var(--ink-2); font-size: 12px; }
.nla-mkc-pg { display: inline-flex; align-items: center; gap: 5px; color: var(--ink); font-size: 12.5px; }
.nla-mkc-unset { display: grid; grid-column: span 7; padding: var(--space-3); place-items: center; color: var(--danger); font-size: 12px; }
.nla-mkc-cell { min-height: 74px; padding: 5px; color: var(--ink-3); font-size: 11px; }
.nla-mkc-cell--off {
  display: grid; place-items: center;
  background: repeating-linear-gradient(45deg, var(--porcelain), var(--porcelain) 6px, var(--stone-2) 6px, var(--stone-2) 12px);
}
.nla-mkc-cell--studio { display: grid; place-items: center; background: var(--stone); color: var(--ink-2); text-align: center; }
.nla-mkc-cell--loading { display: grid; place-items: center; background: var(--stone); opacity: .6; }
.nla-mkc-cell--past { background: var(--stone); }
.nla-mkc-cell.is-drop { outline: 2px solid var(--gold); outline-offset: -2px; background: #FFFBF0; }
.nla-mkc-empty {
  width: 100%; height: 100%; min-height: 62px; border: 1.5px dashed var(--danger); border-radius: var(--r-xs);
  background: var(--danger-bg); color: var(--danger); font: inherit; font-size: 11px; cursor: pointer;
}
.nla-mkc-post {
  display: flex; align-items: center; gap: 6px; padding: 3px; border: 1px solid var(--stone-line); border-radius: var(--r-xs);
  background: var(--porcelain); color: var(--ink); font-size: 11.5px; line-height: 1.25; cursor: grab;
}
.nla-mkc-post:hover { border-color: var(--gold); }
.nla-mkc-post:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.nla-mkc-post.is-drag { opacity: .5; }
.nla-mkc-post.is-moving { outline: 2px solid var(--gold); }
.nla-mkc-post + .nla-mkc-post { margin-top: 4px; }
.nla-mkc-post__txt { min-width: 0; overflow-wrap: anywhere; }
.nla-mkc-thumb { display: block; flex: none; width: 40px; height: 50px; border-radius: var(--r-xs); background: var(--stone-2); object-fit: cover; }
.nla-mkc-st { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; }
.nla-mkc-st--ok { color: var(--ok-line); }
.nla-mkc-st--wait { color: #7d6017; }
.nla-mkc-st--bad, .nla-mkc-st--held { color: var(--danger); }
.nla-mkc-st__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.nla-mkc-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.nla-mkc-month > .nla-mkc-h { border-radius: var(--r-xs); }
.nla-mkc-mday {
  display: flex; min-height: 70px; flex-direction: column; align-items: flex-start; gap: 4px; padding: 6px;
  border: 1px solid var(--stone-line); border-radius: var(--r-xs); background: var(--porcelain); color: var(--ink);
  font: inherit; font-size: 12px; text-align: left; cursor: pointer;
}
.nla-mkc-mday:hover { border-color: var(--gold); }
.nla-mkc-mday.is-out { opacity: .5; }
.nla-mkc-mday.is-today { border-color: var(--gold); background: var(--gold-soft); }
.nla-mkc-mday__n { font-weight: 700; }
.nla-mkc-mday__dots { display: flex; flex-wrap: wrap; gap: 3px; }
.nla-mkc-mday__count { color: var(--ink-3); font-size: 11px; }
.nla-mkc--phone { padding: 0; }
.nla-mkc-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.nla-mkc-wd {
  display: flex; min-width: 0; flex-direction: column; align-items: center; gap: 2px; padding: 5px 0;
  border: 1px solid var(--stone-line); border-radius: var(--r-sm); background: var(--porcelain); color: var(--ink-2);
  font: inherit; font-size: 11px; cursor: pointer;
}
.nla-mkc-wd b { color: var(--ink); font-size: 14px; }
.nla-mkc-wd.is-on { border-color: var(--gold); background: var(--gold-soft); color: #7d6017; }
.nla-mkc-wd__dots { display: flex; min-height: 6px; flex-wrap: wrap; justify-content: center; gap: 2px; }
.nla-mkc-wd__dots .nla-mkc-dot { width: 6px; height: 6px; }
.nla-mkc-list { display: flex; flex-direction: column; gap: 6px; }
.nla-mkc-slot {
  display: flex; align-items: center; gap: 8px; padding: 8px; border: 1px solid var(--stone-line); border-radius: var(--r-sm);
  background: var(--porcelain); font-size: 12.5px;
}
.nla-mkc-slot__t { flex: none; width: 44px; color: var(--ink); font-weight: 700; }
.nla-mkc-slot .nla-mkc-post { flex: 1; padding: 0; border: 0; font-size: 12.5px; }
.nla-mkc-slot .nla-mkc-thumb { width: 46px; height: 58px; }
.nla-mkc-slot .nla-mkc-empty { flex: 1; min-height: 0; padding: 10px; text-align: left; }
.nla-mkc-slot--studio, .nla-mkc-slot--past { background: var(--stone); color: var(--ink-3); }
.nla-mkc-moving { padding: var(--space-2) var(--space-3); border-radius: var(--r-sm); background: var(--gold-soft); color: #7d6017; font-size: 13px; }
.nla-mkc-pick { display: flex; flex-direction: column; gap: var(--space-2); }
.nla-mkc-pick__sub { margin: 0; color: var(--ink-2); font-size: 13px; }
.nla-mkc-pick__row {
  display: flex; align-items: center; gap: var(--space-2); padding: 6px; border: 1px solid var(--stone-line);
  border-radius: var(--r-sm); background: var(--porcelain); color: var(--ink); font: inherit; font-size: 13px; text-align: left; cursor: pointer;
}
.nla-mkc-pick__row:hover { border-color: var(--gold); }
.nla-mkc-pick__row small { color: var(--ink-3); }
.nla-modal.nla-mkc-setmodal { max-width: 640px; }
.nla-mkc-set { display: flex; flex-direction: column; gap: var(--space-3); }
.nla-mkc-set__page { padding: var(--space-3); border: 1px solid var(--stone-line); border-radius: var(--r-sm); }
.nla-mkc-set__page h3 { margin: 0; color: var(--ink); font-family: var(--font-body); font-size: 15px; }
.nla-mkc-set__meta { color: var(--ink-3); font-size: 12px; }
.nla-mkc-set__lbl { margin: var(--space-3) 0 var(--space-1); color: var(--ink-3); font-family: var(--font-label); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.nla-mkc-set__time { gap: 2px; padding-right: 6px; }
.nla-mkc-set__x { display: inline-grid; width: 22px; height: 22px; padding: 0; place-items: center; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.nla-mkc-set__x:hover { background: var(--stone-2); }
.nla-mkc-set__add { display: inline-flex; align-items: center; gap: var(--space-2); }
.nla-mkc-set__err { margin: var(--space-1) 0 0; color: var(--danger); font-size: 12px; }
.nla-mkc-set__days { display: flex; flex-wrap: wrap; gap: 6px; }
.nla-mkc-set__day {
  min-width: 44px; padding: 6px 8px; border: 1px solid var(--hairline-2); border-radius: var(--r-sm); background: var(--porcelain);
  color: var(--ink-2); font: inherit; font-size: 12px; cursor: pointer;
}
.nla-mkc-set__day.is-on { border-color: var(--gold); background: var(--gold-soft); color: #7d6017; font-weight: 600; }
.nla-mkc-set__sum { margin: var(--space-2) 0 0; padding: var(--space-2) var(--space-3); border-radius: var(--r-sm); background: var(--gold-soft); color: #7d6017; font-size: 12.5px; }
/* P6 chi tiet bai: bai giu lai, chan bai, anh da bo (E6, E9, E11). */
.nla-mk-d__hold-band { margin: var(--space-2) 0; padding: var(--space-3); border: 1px solid #E7B9A8; border-radius: var(--r-sm); background: var(--danger-bg); color: var(--danger); font-size: 13px; }
.nla-mk-d__hold-text { font-weight: 700; }
.nla-mk-d__hold-note { margin: var(--space-1) 0 0; color: var(--ink-2); font-size: 12px; }
.nla-mk-d__hold-band .nla-mk-d__actions { margin-top: var(--space-2); }
.nla-mk-d__hold-btn { margin-left: auto; }
.nla-mk-d__foot { margin-top: var(--space-2); padding: var(--space-2) var(--space-3); border: 1px dashed var(--hairline-2); border-radius: var(--r-sm); }
.nla-mk-d__foot-lbl { color: var(--ink-3); font-size: 11px; }
.nla-mk-d__footer-text { margin: 2px 0 0; color: var(--ink-2); font-size: 13px; line-height: 1.5; white-space: pre-wrap; }
/* 861: o "Hashtag bo sung o chan bai" (duoi cung, sau chan bai): khung chan bai co san + the dang vien (.nla-mk-chip) */
.nla-mk-tags__list { margin-top: 6px; gap: 6px; white-space: normal; }
.nla-mk-chip.nla-mk-tag { min-height: 28px; padding: 3px 4px 3px 10px; gap: 2px; cursor: default; }
.nla-mk-chip.nla-mk-tag.is-static { padding: 3px 10px; }
.nla-mk-tag__txt { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: text; }
.nla-mk-tag__x {
  display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0;
  border: 0; border-radius: 50%; background: none; color: var(--ink-3); cursor: pointer;
}
.nla-mk-tag__x:hover { background: var(--stone-2); color: var(--ink); }
.nla-mk-tags__input {
  flex: 1 1 120px; min-width: 100px; min-height: 28px; padding: 3px 10px; border: 1px dashed var(--hairline-2);
  border-radius: var(--r-pill); background: var(--porcelain); color: var(--ink); font: inherit; font-size: 13px;
}
.nla-mk-tags__input:focus { outline: 2px solid var(--gold-soft); border-color: var(--gold); border-style: solid; }
.nla-mk-tags__none { color: var(--ink-3); font-size: 13px; }
.nla-mk-tags__warn { margin: 6px 0 0; color: #7d6017; font-size: 12px; }
.nla-mkw-foot.nla-mk-tags .nla-mk-tags__input { font-size: 16px; }
.nla-mk-d__frame.is-dropped .nla-mk-d__img { filter: grayscale(1); opacity: .35; }
.nla-mk-d__dropped {
  position: absolute; top: var(--space-2); left: var(--space-2); right: var(--space-2); padding: 3px 6px; border-radius: var(--r-xs);
  background: rgba(33, 29, 25, .72); color: #fff; font-size: 11px; line-height: 1.3;
}
.nla-mk-d__restore { position: absolute; bottom: var(--space-2); left: 50%; transform: translateX(-50%); white-space: nowrap; }
/* P6 dien thoai (mockup 29 B): 3 o chon + bang chon tu duoi len. */
.nla-mk__filters--phone { flex-direction: column; align-items: stretch; }
.nla-mk-sels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.nla-mk-sel {
  display: flex; min-width: 0; flex-direction: column; align-items: flex-start; padding: 6px 10px; border: 1px solid var(--hairline-2);
  border-radius: var(--r-sm); background: var(--porcelain); color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.nla-mk-sel.is-on { border-color: var(--gold); background: var(--gold-soft); }
.nla-mk-sel__lbl { color: var(--ink-3); font-size: 10.5px; }
.nla-mk-sel__val { display: inline-flex; max-width: 100%; align-items: center; gap: 4px; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.nla-mk-sheet { position: fixed; inset: 0; z-index: 880; }
.nla-mk-sheet__backdrop { position: absolute; inset: 0; background: rgba(33, 29, 25, .35); }
.nla-mk-sheet__panel {
  position: absolute; left: 0; right: 0; bottom: 0; padding: var(--space-4) var(--space-4) calc(var(--space-5) + env(safe-area-inset-bottom));
  border-radius: 18px 18px 0 0; background: var(--porcelain); box-shadow: 0 -8px 24px rgba(33, 29, 25, .15);
}
.nla-mk-sheet__lbl { margin-bottom: var(--space-2); color: var(--ink-3); font-family: var(--font-label); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
@media (max-width: 1100px) {
  .nla-mk__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nla-mkc-grid { grid-template-columns: 110px repeat(7, minmax(0, 1fr)); }
  .nla-mkc-thumb { width: 30px; height: 38px; }
}
@media (max-width: 900px) {
  .nla-mk__filters { justify-content: flex-start; }
  .nla-mk__sub, .nla-mk__hint, .nla-mk__sep { display: none; }
  .nla-mk__body { grid-template-columns: 1fr; }
  .nla-mk__main { padding: var(--space-3); }
  .nla-mk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
  /* Mockup 12: khong co o so (tieu de da co "· Cho duyet (N)"); "Bai #N" van hien de phan biet bai. */
  .nla-mk__stats { display: none; }
  .nla-mk-card__when { padding: var(--space-1) var(--space-2) 0; font-size: 13px; }
  .nla-mk-card__no { padding: 0 var(--space-2) var(--space-1); font-size: 11px; }
  .nla-mk-card__cap, .nla-mk-nav, .nla-mk-dots { display: none; }
}
/* Dien thoai: chi tiet toan man, 3 nut lon co dinh duoi day. Lop do view dat theo innerWidth. */
.nla-modal-overlay:has(.nla-mk-modal--phone) { padding: 0; }
.nla-modal.nla-mk-modal--phone { width: 100%; max-width: none; height: 100%; max-height: none; padding: var(--space-3) var(--space-3) 96px; border-radius: 0; }
.nla-mk-d--phone { display: flex; flex-direction: column; gap: var(--space-2); }
.nla-mk-d--phone .nla-mk-d__meta { display: flex; min-height: 44px; align-items: center; padding-right: 48px; }
.nla-mk-d--phone .nla-mk-d__frame { flex-basis: 100%; }
.nla-mk-d__meta { color: var(--ink); font-size: 13px; font-weight: 700; }
.nla-mk-d--phone .nla-mk-d__bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; gap: var(--space-2);
  padding: var(--space-3); border-top: 1px solid var(--stone-line); background: var(--porcelain);
}
.nla-mk-bar__btn {
  flex: 1; min-height: 48px; border: 1px solid var(--ink); border-radius: var(--r-pill); background: var(--porcelain);
  color: var(--ink); font-family: var(--font-label); font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
}
.nla-mk-bar__btn--gold { border-color: var(--gold); background: var(--gold); color: #fff; }
.nla-mk-bar__btn:disabled { opacity: .5; }
/* Editable controls and copyable detail surfaces intentionally win the cascade. */
.nla-modal,
.nla-modal * {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}
/* Duoi 1200px thi hai cot ben khong con du rong: popup tren, chi tiet o giua,
   tom tat duoi cung; ca ba van can giua. */
[data-rs-removed-detail] {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border: 1px dashed var(--hairline-2); border-radius: var(--r-sm);
  background: #F7F7F7; color: var(--ink-3); font-size: 12px; line-height: 1.4;
}
[data-rs-removed-detail][hidden] { display: none; }
[data-rs-removed-detail] b {
  color: var(--ink-3); font: 600 15px/1.2 var(--font-display); text-decoration: line-through;
}
/* Khoi ZDOBENI trong tung muc Manikura/Pedikura cua the Chi tiet dich vu. */

[data-member-services] button { position: relative; }

/* O vua doi loe vang mot nhip. Chi gan SAU lan ve dau tien, de mo popup
   khong loe ca bang. */
@keyframes nla-bs-flash {
  0%, 55% { background: #FBF0D2; box-shadow: 0 0 0 3px #FBF0D2; }
  100% { background: transparent; box-shadow: 0 0 0 3px transparent; }
}
/* display: flex thang [hidden] cua trinh duyet, nen phai tu tat o day:
   thieu dong nay la bam "dong" xong danh sach van hien nguyen. */

@media (max-width: 600px) {
}


/* Ca dang sua: Canh bao Cach A da duyet, dung actwarn + skipwarn co san. */
[data-sc-offshift][hidden] { display: none; }
/* Khong ve thanh cuon (van cuon duoc bang banh xe / vuot): thanh cuon an mat 15px lam hop hep lai. */
@keyframes nla-tab-blink {
  0%, 100% { box-shadow: 0 0 0 0 rgba(164,84,59,0), 0 8px 24px -12px rgba(33,29,25,.3); }
  50% { box-shadow: 0 0 0 4px rgba(164,84,59,.55), 0 8px 24px -12px rgba(33,29,25,.3); } }
/* Toast (#nla-toast-root) cung goc trai duoi: nhay len tren hop nay. Dung SAU luat cua hop "khach ngoai ca". */
@media (min-width: 901px) {
}
/* Nut thu nho / mo rong: cung hinh nut cua phieu thu tien (.nla-payrem__mini). */
@media (min-width: 901px) {
}

/* ============================================================
   Hop xac nhan "Ve som" (Bang lich hen) — chi dung token mau san co.
   ============================================================ */
.nla-modal__actions .btn:disabled { opacity: .45; cursor: not-allowed; }

/* Tablet cam ung dang mo/dong ban phim (ui.js bindKeyboardCalm): moi hieu ung dung yen,
   de Chrome khong ham trang 1 hinh/giay luc doi co (man den 2-3 giay, Cerny Most 15.10). */
.nla-calm *, .nla-calm *::before, .nla-calm *::after { animation-play-state: paused !important; transition: none !important; }

/* Hop "Goi bao khach": so dien thoai to de doc, moi ket qua mot nut rieng. */

@media (max-width: 980px) {
}

/* P7a: shared Marketing frame, number lookup and manual publication package. */
.nla-mk-browse { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.nla-mk-search { display: flex; align-items: center; gap: var(--space-2); color: var(--ink-3); font-size: 13px; }
.nla-mk-search input { width: 150px; min-width: 0; padding: 8px 12px; border: 1px solid var(--hairline-2); border-radius: 99px; font: inherit; background: var(--surface); color: var(--ink); }
.nla-mk-search__message { font-size: 13px; color: var(--ink-3); }
/* 09.11 thanh loc Marketing (Cach A, mockup docs/superpowers/mockups/2026-11-09-thanh-loc-marketing.html): o so = nut loc
   trang thai, o chon Trang / Caption, Luoi|Lich + Tuan|Thang segmented, nut icon Tai lai / "them" (mkt-board.js, mkt-calendar.js). */
.nla-mk-stat--pick { display: flex; flex-direction: column; align-items: flex-start; width: 100%; min-width: 0; font: inherit; text-align: left; cursor: pointer; }
.nla-mk-stat--pick > span { display: block; max-width: 100%; }
.nla-mk-stat--pick:hover { border-color: var(--gold); }
.nla-mk-stat--pick.is-on { border-color: var(--gold); background: #FFFBF2; box-shadow: inset 0 0 0 1px var(--gold), var(--shadow-sm); }
.nla-mk__bar-end { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
.nla-mk__filters--bar .nla-mk-search input { width: 130px; }
.nla-mk-dd { position: relative; display: inline-flex; }
.nla-mk-dd__btn, .nla-mk-ib {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; border: 1px solid var(--hairline-2);
  border-radius: 10px; background: var(--porcelain); color: var(--ink); font: inherit; font-size: 13px; line-height: 1.2; cursor: pointer;
}
.nla-mk-dd__btn { padding: 6px 12px; white-space: nowrap; }
.nla-mk-dd__lbl, .nla-mk-dd__btn svg { color: var(--ink-3); }
.nla-mk-ib { position: relative; width: 34px; height: 34px; padding: 0; color: var(--ink-2); }
.nla-mk-dd__btn:hover, .nla-mk-ib:hover { border-color: var(--gold); }
.nla-mk-dd__btn.is-set, .nla-mk-ib.is-set { border-color: var(--gold); background: var(--gold-soft); color: #7d6017; }
.nla-mk-dd__btn.is-set .nla-mk-dd__lbl, .nla-mk-dd__btn.is-set svg { color: #7d6017; }
.nla-mk-ib__n {
  position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--gold);
  color: #fff; font-size: 11px; font-weight: 600; line-height: 18px; text-align: center;
}
.nla-mk-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 70; display: flex; flex-direction: column; min-width: 220px; padding: 6px;
  border: 1px solid var(--hairline-2); border-radius: 12px; background: var(--porcelain); box-shadow: 0 8px 20px rgba(33, 29, 25, .12);
}
.nla-mk-dd--end .nla-mk-menu { left: auto; right: 0; }
.nla-mk-menu__item {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 8px 10px; border: 0; border-radius: 8px;
  background: transparent; color: var(--ink); font: inherit; font-size: 13px; text-align: left; cursor: pointer;
}
.nla-mk-menu__item:hover { background: #F6F1E8; }
.nla-mk-menu__item.is-on { background: var(--gold-soft); color: #7d6017; }
.nla-mk-menu__lbl { display: inline-flex; align-items: center; gap: 6px; }
.nla-mk-menu__lbl svg { vertical-align: -2px; }
.nla-mk-menu__n { color: var(--ink-3); font-size: 12px; }
.nla-mk-seg { display: inline-flex; flex: none; overflow: hidden; border: 1px solid var(--hairline-2); border-radius: 10px; background: var(--porcelain); }
.nla-mk-seg__btn { min-height: 32px; padding: 6px 14px; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 13px; line-height: 1.2; cursor: pointer; }
.nla-mk-seg__btn + .nla-mk-seg__btn { border-left: 1px solid var(--hairline-2); }
.nla-mk-seg__btn:hover:not(.is-on) { background: #F6F1E8; }
.nla-mk-seg__btn.is-on { background: var(--gold-soft); color: #7d6017; }
.nla-mk-stat--pick:focus-visible, .nla-mk-dd__btn:focus-visible, .nla-mk-ib:focus-visible, .nla-mk-menu__item:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.nla-mk-seg__btn:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.nla-mk-p7-actions { flex-wrap: wrap; font-size: 13px; }
.nla-mk-p7-actions p { flex-basis: 100%; margin: 0; }
.nla-mk-p7-actions .btn:disabled, .nla-mk-publish .btn:disabled { opacity: .45; cursor: not-allowed; }
.nla-mk-p7-error { color: var(--danger, #B4473A); }
.nla-mk-publish { max-width: 640px; margin: 0 auto; }
.nla-mk-publish h2 { margin: 0 0 var(--space-3); font-size: 20px; }
.nla-mk-publish h3 { margin: var(--space-4) 0 var(--space-2); color: var(--ink-2); font-size: 14px; }
.nla-mk-publish__media { display: flex; gap: var(--space-2); overflow-x: auto; margin-bottom: var(--space-3); }
.nla-mk-publish__image { width: 120px; height: 150px; flex: 0 0 120px; border-radius: var(--r-sm); object-fit: contain; background: var(--surface); }
.nla-mk-publish__caption { box-sizing: border-box; display: block; width: 100%; padding: var(--space-3); margin-bottom: var(--space-3); border: 1px solid var(--hairline-2); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; line-height: 1.5; resize: vertical; }
.nla-mk-publish__targets { display: flex; flex-wrap: wrap; gap: var(--space-3); font-size: 13px; }
.nla-mk-publish p { font-size: 13px; color: var(--ink-3); }
@media (max-width: 900px) {
  .nla-mk-browse { gap: var(--space-2); }
  .nla-mk-search { flex-wrap: wrap; }
  .nla-mk-publish__targets { flex-direction: column; }
  .nla-mk__body > .nla-mkc--phone { padding: var(--space-2); background: var(--surface); border-radius: var(--r-sm); }
}

/* P8 (800, mockup 39 + 40): tu dang Facebook / Instagram, chan bai 2 loai, story. */
.nla-mk-pubchip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 99px; font-size: 11.5px; font-weight: 600; line-height: 1.4; }
.nla-mk-pubchip svg { flex: none; }
.nla-mk-pubchip--ok { background: var(--ok-bg); color: var(--ok-line); }
.nla-mk-pubchip--run { background: var(--stone-2); color: var(--ink-2); }
.nla-mk-pubchip--bad { background: var(--danger-bg); color: var(--danger); }
/* 10.11 nhom A (mockup nhom-a muc 1): o "Qua gio chua dang" (5 o so) + dong ly do duoi chip Qua gio tren the. */
.nla-mk__stats.nla-mk__stats--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.nla-mk-stat--bad { border-color: var(--danger); background: #FFF8F6; }
.nla-mk-stat--bad .nla-mk-stat__value { color: var(--danger); }
.nla-mk-card__why { padding: var(--space-1) var(--space-3) 0; color: var(--ink-3); font-size: 12px; line-height: 1.4; }
@media (max-width: 1100px) {
  .nla-mk__stats.nla-mk__stats--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .nla-mk-card__why { padding: var(--space-1) var(--space-2) 0; font-size: 11px; }
}
.nla-mk-d__status--run { display: flex; align-items: center; gap: 6px; background: var(--gold-soft); color: #7d6017; }
.nla-mk-d__status a, .nla-mk-pub a { color: #7d6017; font-weight: 600; }
.nla-mk-pub { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-2) 0; }
.nla-mk-pub__err { display: flex; align-items: flex-start; gap: 6px; padding: var(--space-2) var(--space-3); border-radius: var(--r-sm); background: var(--danger-bg); color: var(--danger); font-size: 13px; line-height: 1.45; }
.nla-mk-pub__err svg { flex: none; margin-top: 2px; }
.nla-mk-pub__err--soft { background: var(--stone-2); color: var(--ink-2); }
.nla-mk-pub__note { margin: 0; color: var(--ink-3); font-size: 12px; line-height: 1.45; }
.nla-mk-pub__note svg { vertical-align: -2px; }
.nla-mk-pub__acts { flex-wrap: wrap; margin: 0; }
.nla-mk-pub__now { display: flex; flex-basis: 100%; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.nla-mk-pub .btn:disabled, .nla-mk-pub__now .btn:disabled, .nla-mk-now .btn:disabled { opacity: .45; cursor: not-allowed; }
.nla-mk-now { box-sizing: border-box; width: 100%; max-width: 360px; padding: var(--space-4); border-radius: var(--r-md, 14px); background: var(--surface, #fff); box-shadow: var(--shadow-md), 0 0 0 1px var(--stone-line); font-size: 14px; }
.nla-mk-now b { display: block; margin-bottom: var(--space-2); color: var(--ink); }
.nla-mk-now__targets { margin: var(--space-2) 0; }
.nla-mk-now__targets input:disabled + * { opacity: .5; }
.nla-mk-captabs { margin: var(--space-1) 0 var(--space-2); }
.nla-mk-publish__copy { flex-wrap: wrap; margin: 0 0 var(--space-3); }
.nla-mk-publish__image--story { width: 68px; height: 120px; flex: 0 0 68px; object-fit: cover; }
.nla-mkc-set__auto { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 6px 0 2px; }
.nla-mkc-sw { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: transparent; color: var(--ink); font: 600 13px var(--font-body); cursor: pointer; }
.nla-mkc-sw:disabled { cursor: not-allowed; opacity: .55; }
.nla-mkc-sw__track { position: relative; display: inline-block; width: 38px; height: 22px; flex: none; border-radius: 99px; background: var(--stone-line-2); transition: background .18s; }
.nla-mkc-sw__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: left .18s; }
.nla-mkc-sw.is-on .nla-mkc-sw__track { background: var(--gold); }
.nla-mkc-sw.is-on .nla-mkc-sw__track::after { left: 19px; }
.nla-mkc-sw:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 99px; }
.nla-mkc-hchip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 99px; font-size: 12px; font-weight: 600; }
.nla-mkc-hchip--ok { background: var(--ok-bg); color: var(--ok-line); }
.nla-mkc-hchip--bad, .nla-mkc-hchip--none, .nla-mkc-hchip--error { background: var(--danger-bg); color: var(--danger); }
.nla-mkc-hchip--loading { background: var(--stone-2); color: var(--ink-2); }
.nla-mkc-set__small { margin: 2px 0 var(--space-1); color: var(--ink-2); font-size: 12px; }
.nla-mkc-set__chks { display: flex; flex-wrap: wrap; gap: var(--space-3); font-size: 13px; }
.nla-mkc-set__chk { display: inline-flex; align-items: center; gap: 6px; }
.nla-mkc-set__line { display: grid; grid-template-columns: 82px minmax(0, 1fr) auto; align-items: center; gap: var(--space-2); margin-top: 6px; color: var(--ink-2); font-size: 13px; }
.nla-mkc-set__line input { box-sizing: border-box; width: 100%; min-width: 0; }
.nla-mkc-set__line small { color: var(--ink-3); font-size: 11px; font-variant-numeric: tabular-nums; }
.nla-mkc-set__line.is-bad input { border-color: var(--danger); }
.nla-mkc-set__line.is-bad small { color: var(--danger); }
.nla-mkc-st--publishing { color: #7d6017; }
.nla-mkc-st--failed, .nla-mkc-st--missed { color: var(--danger); }
@media (max-width: 900px) {
  .nla-mk-now { max-width: none; }
  .nla-mkc-set__line { grid-template-columns: 1fr auto; }
  .nla-mkc-set__line span { grid-column: 1 / -1; }
}
/* 879 go bai da dang (mockup 2026-11-08 Cach 2): danh sach noi + tien do; khung dung lai .nla-mk-rj, nut .nla-mk-btn--reject*. */
.nla-mk-td { margin: var(--space-2) 0; }
.nla-mk-td__list { list-style: none; margin: 0 0 var(--space-2); padding: 0; }
.nla-mk-td__row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); padding: 6px 0; border-bottom: 1px dashed var(--hairline); font-size: 13px; }
.nla-mk-td__row:last-child { border-bottom: 0; }
.nla-mk-td__chk { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.nla-mk-td__chk input { margin: 0; }
.nla-mk-td__row.is-off .nla-mk-td__chk { color: var(--ink-3); cursor: default; }
.nla-mk-td__side { color: var(--ink-3); font-size: 12px; text-align: right; }
.nla-mk-td__side.is-ok { color: var(--ok-line); }
.nla-mk-td__side.is-run { color: var(--gold); }
.nla-mk-td__side.is-bad { color: var(--danger); }
.nla-mk-td__lbl { margin: var(--space-2) 0 6px; color: var(--ink-3); font-size: 12px; }
.nla-mk-td__warn { margin: var(--space-2) 0 0; color: var(--danger); font-size: 12px; }
.nla-mk-td__acts { flex-wrap: wrap; margin-top: var(--space-3); }
.nla-mk-td .nla-mk-pub__note { margin-top: var(--space-2); }
/* P7b (819): thay / them anh (mockup 37 ②), anh da thay, thung rac (mockup 45), lich giu bai da dang (mockup 43). */
.nla-mk-d__replace {
  position: absolute; bottom: var(--space-2); left: 50%; transform: translateX(-50%); white-space: nowrap;
  background: var(--porcelain); font-size: 12px;
}
.nla-mk-d__frame.is-redraw .nla-mk-d__replace { z-index: 1; }
.nla-mk-d__add {
  /* Cung khung voi .nla-mk-d__frame (4:5, 3 o / hang) nhung khong phai mot anh cua bai. */
  flex: 0 0 calc((100% - 2 * var(--space-2)) / 3); aspect-ratio: 4 / 5; border-radius: var(--r-xs); scroll-snap-align: start;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  border: 1.5px dashed var(--gold); background: var(--porcelain); color: #7d6017; font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer;
}
.nla-mk-d__add:disabled { cursor: default; opacity: .55; }
.nla-mk-d__add:hover:not(:disabled) { background: var(--gold-soft); }
.nla-mk-d__addnote { margin: 6px 0 0; color: var(--ink-3); font-size: 12px; line-height: 1.45; }
.nla-mk-d__upload {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; padding: 6px 10px;
  border-radius: var(--r-sm); background: var(--stone-2); color: var(--ink-2); font-size: 13px;
}
.nla-mk-d__upload.is-bad { background: var(--danger-bg); color: var(--danger); }
.nla-mk-d__upload .nla-mk-d__actions { margin: 0; }
.nla-mk-d__replaced { margin-top: 2px; }
.nla-mk-manual { margin-top: var(--space-2); }
.nla-mk-chip--trash .nla-mk-tab__count { margin-left: 2px; }
.nla-mk-d--phone .nla-mk-d__add { flex-basis: 100%; }
.nla-mk-trash { margin-top: var(--space-2); }
.nla-mk-trow { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--hairline-2); }
.nla-mk-trow__th { flex: none; width: 44px; height: 54px; overflow: hidden; border-radius: var(--r-xs); background: var(--stone-2); }
.nla-mk-trow__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nla-mk-trow__txt { flex: 1; min-width: 0; font-size: 13px; line-height: 1.4; }
.nla-mk-trow__line { color: var(--ink-2); font-size: 12px; }
.nla-mkc-post.is-posted { border-color: #BBD3B4; background: #F3F7F0; cursor: pointer; }
.nla-mkc-post.is-posted .nla-mkc-thumb { filter: saturate(.75); }
.nla-mkc-st--posted { color: var(--ok-line); }
.nla-mkc-post__links { color: #7d6017; font-size: 10.5px; }

/* ---------- 28.10.2026: trang "Viet caption" (mkt-caption.js, plan 2026-10-28-mkt-tu-viet-caption.md B1, mockup 48 ① ② ④ ⑤).
   Dien thoai la chinh; may tinh: mot cot giua rong toi da 520px. Tien to nla-mkw (nla-mkc da la luoi lich mkt-calendar.js). ---------- */
.nla-mkw { display: flex; flex-direction: column; gap: var(--space-2); width: 100%; max-width: 520px; margin: 0 auto; }
.nla-mkw__bar { display: flex; align-items: center; gap: var(--space-2); min-height: 44px; padding-bottom: var(--space-2); border-bottom: 1px solid var(--hairline); }
.nla-mkw__bar .nla-view-titlebar { flex: 1 1 auto; min-width: 0; }
.nla-mkw__title { flex: 1 1 auto; min-width: 0; margin: 0; overflow: hidden; color: var(--ink); font-family: var(--font-body); font-size: 17px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.nla-mkw__count { flex: none; margin-left: auto; color: var(--ink-3); font-size: 13px; }
.nla-mkw__back { display: inline-grid; flex: none; width: 44px; height: 44px; margin-left: calc(-1 * var(--space-2)); padding: 0; place-items: center; border: 0; background: transparent; color: #7d6017; cursor: pointer; }
.nla-mkw__sec { margin: var(--space-3) 0 0; color: var(--ink-3); font-family: var(--font-label); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.nla-mkw__rows { display: flex; flex-direction: column; gap: var(--space-2); }
.nla-mkw__empty { padding: var(--space-5) var(--space-3); border: 1px dashed var(--hairline-2); border-radius: var(--r-md); color: var(--ink-3); text-align: center; }
.nla-mkw-item {
  display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 82px; padding: var(--space-2);
  border: 1px solid var(--hairline-2); border-radius: var(--r-md); background: var(--porcelain); color: var(--ink);
  font: inherit; text-align: left; cursor: pointer;
}
.nla-mkw-item:hover { border-color: var(--gold); }
.nla-mkw-item:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.nla-mkw-item.is-done { opacity: .6; }
.nla-mkw-item__thumb { flex: none; width: 54px; height: 66px; overflow: hidden; border-radius: var(--r-sm); background: var(--stone-2); }
.nla-mkw-item__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nla-mkw-item__thumb .nla-mk-media--failed { padding: 2px; font-size: 9px; }
.nla-mkw-item__body { display: flex; flex: 1 1 auto; min-width: 0; flex-direction: column; gap: 2px; }
.nla-mkw-item__title { font-size: 14px; }
.nla-mkw-item__sub { color: var(--ink-3); font-size: 12px; }
.nla-mkw-item.is-nosalon .nla-mkw-item__title b { color: var(--danger); }
.nla-mkw-item__go { flex: none; color: var(--gold); }
.nla-mkw-undo { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--r-sm); background: var(--ink); color: var(--porcelain); font-size: 13px; }
/* Dot 2 (mockup ban 2, 03.11): mot dong khung bat thong bao day duoi thanh tieu de danh sach Viet caption. */
.nla-mkw-push { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-top: var(--space-2); padding: var(--space-2) var(--space-3); border: 1px solid var(--hairline-2); border-radius: var(--r-sm); background: var(--porcelain); color: var(--ink-2); font-size: 13px; }
.nla-mkw-push__icon { display: inline-flex; flex: none; color: var(--gold); }
.nla-mkw-push__text { flex: 1 1 12em; min-width: 0; }
.nla-mkw-push__btn { flex: none; min-height: 36px; padding: 4px 16px; }
.nla-mkw-push__err { flex-basis: 100%; color: var(--danger); }
.nla-mkw-undo span { flex: 1 1 auto; }
.nla-mkw-undo__btn { flex: none; min-height: 36px; padding: 0 var(--space-2); border: 0; background: transparent; color: var(--gold-soft); font: inherit; font-weight: 700; cursor: pointer; }
.nla-mkw-mediawrap { margin-top: var(--space-2); }
/* Cao ~40% man hinh (mockup ②: anh tren, o caption van thay khong can cuon nhieu). Anh vua khung, khong cat. */
.nla-mkw-media { position: relative; height: 42vh; min-height: 220px; max-height: 460px; overflow: hidden; border-radius: var(--r-md); background: var(--stone-2); }
.nla-mkw-media__img { display: block; width: 100%; height: 100%; object-fit: contain; }
img.nla-mkw-media__img { cursor: zoom-in; }
.nla-mkw-media__cnt { position: absolute; top: var(--space-2); right: var(--space-2); padding: 2px 8px; border-radius: var(--r-pill); background: rgba(33, 29, 25, .7); color: #fff; font-size: 11px; }
.nla-mkw-media__zoom { position: absolute; right: var(--space-2); bottom: var(--space-2); min-height: 32px; padding: 4px 10px; border: 0; border-radius: var(--r-pill); background: rgba(255, 255, 255, .92); color: var(--ink); font: 600 12px var(--font-body); cursor: pointer; }
.nla-mkw-media__nav { position: absolute; top: 50%; display: grid; width: 36px; height: 36px; padding: 0; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .85); color: var(--ink); transform: translateY(-50%); cursor: pointer; }
.nla-mkw-media__nav--prev { left: var(--space-2); }
.nla-mkw-media__nav--next { right: var(--space-2); }
.nla-mkw-dots { display: flex; justify-content: center; gap: 5px; margin: var(--space-2) 0 0; }
.nla-mkw-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--hairline-2); }
.nla-mkw-dots i.is-on { background: var(--gold); }
.nla-mkw-strip { display: none; gap: 6px; margin-top: var(--space-2); overflow-x: auto; }
.nla-mkw-strip__thumb { flex: none; width: 44px; height: 54px; padding: 0; overflow: hidden; border: 0; border-radius: 6px; background: var(--stone-2); cursor: pointer; }
.nla-mkw-strip__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nla-mkw-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--ink-2); font-size: 12px; }
.nla-mkw-tag { padding: 2px 9px; border-radius: var(--r-pill); background: var(--gold-soft); color: #7d6017; font-size: 11.5px; font-weight: 600; }
.nla-mkw-warn { margin: 0; padding: var(--space-2) var(--space-3); border: 1px solid var(--danger); border-radius: var(--r-sm); background: var(--danger-bg); color: var(--danger); font-size: 13px; }
.nla-mkw-cap { padding: var(--space-3); border: 1px solid var(--hairline-2); border-radius: var(--r-md); background: var(--porcelain); }
.nla-mkw-cap__head { display: flex; align-items: center; margin-bottom: 6px; }
.nla-mkw-cap__head label { color: var(--ink-3); font-family: var(--font-label); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.nla-mkw-cap__count { margin-left: auto; color: var(--ink-3); font-size: 12px; }
.nla-mkw-cap__input {
  display: block; box-sizing: border-box; width: 100%; min-height: 120px; padding: var(--space-2) var(--space-3);
  border: 1px solid var(--gold-bright); border-radius: var(--r-sm); background: var(--porcelain); color: var(--ink);
  font: 16px/1.5 var(--font-body); resize: vertical;
}
.nla-mkw-cap__input:focus { outline: 2px solid var(--gold-soft); border-color: var(--gold); }
.nla-mkw-cap__input:disabled { border-color: var(--hairline-2); background: var(--stone); color: var(--ink-3); }
.nla-mkw-foot { padding-top: 6px; border-top: 1px dashed var(--hairline-2); color: var(--ink-3); font-size: 12px; white-space: pre-line; }
.nla-mkw-foot__lbl { font-weight: 600; }
.nla-mkw-actions {
  position: sticky; bottom: 0; z-index: 2; display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin-top: var(--space-2); padding: var(--space-3) 0 calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--hairline); background: var(--stone);
  /* #nla-view co le duoi: to kin khoang le do de chu cuon qua khong lo ra duoi hang nut. */
  box-shadow: 0 var(--space-5) 0 var(--stone);
}
.nla-mkw-btn { justify-content: center; min-height: 44px; padding: 10px 16px; font-size: 12px; letter-spacing: .08em; }
.nla-mkw-btn--save { flex: 1 1 100%; }
.nla-mkw-btn--save:disabled { opacity: .45; cursor: default; box-shadow: none; }
.nla-mkw-btn--detail { flex: 1 1 auto; }
.nla-mkw-btn--blur { display: none; flex: 1 1 0; }
@media (min-width: 901px) {
  .nla-mkw-actions { border-top: 0; }
}
/* Man ④ (dien thoai, ban phim mo): anh lon thu thanh dai nho, nut "Thoi" + "Luu va duyet" mot hang. */
@media (max-width: 900px) {
  .nla-mkw .nla-view-titlebar [data-nla-view-fullscreen] { display: none; }
  .nla-mkw--post.is-typing .nla-mkw-mediawrap, .nla-mkw--post.is-typing .nla-mkw-meta, .nla-mkw--post.is-typing .nla-mkw-foot,
  .nla-mkw--post.is-typing .nla-mkw-undo { display: none; }
  .nla-mkw--post.is-typing .nla-mkw-strip { display: flex; }
  .nla-mkw--post.is-typing .nla-mkw-btn--blur { display: inline-flex; }
  .nla-mkw--post.is-typing .nla-mkw-btn--save { flex: 2 1 0; }
  .nla-mkw--post.is-typing .nla-mkw-btn--detail { display: none; }
  .nla-mkw--post.is-typing .nla-mkw-cap__input { min-height: 150px; }
}

/* ---------- 28.10.2026: khung xem anh lon dung chung (mkt-lightbox.js, mockup 48 ③) ---------- */
body.nla-mklb-open { overflow: hidden; }
.nla-mklb {
  position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column;
  padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px); background: #0d0b0a; color: #fff; outline: none;
}
.nla-mklb__top { display: flex; align-items: center; justify-content: space-between; padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4); font-size: 14px; }
.nla-mklb__close { display: grid; width: 44px; height: 44px; padding: 0; place-items: center; border: 0; background: transparent; color: #fff; cursor: pointer; }
.nla-mklb__stage { position: relative; display: flex; flex: 1 1 auto; min-height: 0; align-items: center; justify-content: center; touch-action: pinch-zoom; }
.nla-mklb__media { display: block; max-width: 100%; max-height: 100%; width: 100%; height: 100%; object-fit: contain; }
.nla-mklb__missing { color: var(--stone-3); font-size: 14px; }
.nla-mklb__arrow { position: absolute; top: 50%; display: grid; width: 44px; height: 44px; padding: 0; place-items: center; border: 0; border-radius: 50%; background: rgba(33, 29, 25, .55); color: #fff; transform: translateY(-50%); cursor: pointer; }
.nla-mklb__arrow--prev { left: var(--space-2); }
.nla-mklb__arrow--next { right: var(--space-2); }
.nla-mklb__thumbs { display: flex; justify-content: center; gap: 6px; padding: var(--space-3); overflow-x: auto; }
.nla-mklb__thumb { flex: none; width: 44px; height: 54px; padding: 0; overflow: hidden; border: 0; border-radius: 6px; background: rgba(255, 255, 255, .12); color: #fff; opacity: .55; cursor: pointer; }
.nla-mklb__thumb.is-on { opacity: 1; outline: 2px solid var(--gold-bright); }
.nla-mklb__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nla-mklb__thumb-label { font-size: 10px; }

/* Man chi tiet Marketing (28.10, B3): mot o caption; o trong = chu xam nghieng. Anh trong khung bam duoc de xem lon. */
.nla-mk-opt__text--empty { color: var(--ink-3); font-style: italic; }
.nla-mk-d__frame img.nla-mk-d__img, .nla-mk-d__fbcell img.nla-mk-d__img { cursor: zoom-in; }

/* ---------- 850 (Hai 02.11.2026): 2 PA AI + "Tu viet" (trang Viet caption + man Marketing), "Anh khong dat" tren web,
   nhom duyet caption (Tai khoan quan ly), trang Thong ke caption. Mau lay tu token co san (vang = dang chon, xanh web = nhom duyet). ---------- */
.nla-mkw-pa { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: var(--r-pill); background: var(--gold-soft); color: #7d6017; font-size: 11px; font-weight: 600; vertical-align: 1px; }
.nla-mkw-pa.is-wait { background: var(--stone-2); color: var(--ink-3); font-weight: 400; }
.nla-mkw-pick { display: flex; flex-direction: column; gap: var(--space-2); }
.nla-mkw-pick__lbl { color: var(--ink-3); font-family: var(--font-label); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.nla-mkw-opts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.nla-mkw-opt { display: flex; min-width: 0; flex-direction: column; gap: 4px; padding: var(--space-2) var(--space-3); border: 1px solid var(--hairline-2); border-radius: var(--r-md); background: var(--porcelain); }
.nla-mkw-opt.is-on { border: 2px solid var(--gold); padding: calc(var(--space-2) - 1px) calc(var(--space-3) - 1px); background: #FFFBF0; }
.nla-mkw-opt__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; }
.nla-mkw-opt__name { font-weight: 700; color: var(--ink); }
.nla-mkw-opt__on { margin-left: auto; color: #7d6017; font-size: 12px; font-weight: 600; }
.nla-mkw-opt__use { margin-left: auto; min-height: 32px; padding: 0 4px; border: 0; background: transparent; color: #7d6017; font: 600 12px var(--font-body); text-decoration: underline; cursor: pointer; }
.nla-mkw-opt__text { display: -webkit-box; margin: 0; overflow: hidden; color: var(--ink-2); font-size: 13px; line-height: 1.45; white-space: pre-wrap; -webkit-box-orient: vertical; -webkit-line-clamp: 6; }
.nla-mkw-opt__text--wait { color: var(--ink-3); font-style: italic; }
.nla-mkw-self { align-self: flex-start; min-height: 40px; padding: 6px 14px; border: 1px dashed var(--hairline-2); border-radius: var(--r-pill); background: transparent; color: var(--ink-2); font: 600 13px var(--font-body); cursor: pointer; }
.nla-mkw-self.is-on { border: 2px solid var(--gold); background: #FFFBF0; color: #7d6017; }
.nla-mkw-self:disabled { opacity: .55; cursor: default; }
.nla-mkw-cap .nla-mkw-cap__count { margin: 6px 0 0; text-align: right; }
.nla-mkw-btn--bad { flex: 1 1 auto; }
.nla-mkw-bad { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--hairline-2); border-radius: var(--r-md); background: var(--porcelain); }
.nla-mkw-bad__lbl { color: var(--ink-3); font-family: var(--font-label); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.nla-mkw-bad__note { box-sizing: border-box; width: 100%; min-height: 40px; padding: 6px 10px; border: 1px solid var(--hairline-2); border-radius: var(--r-sm); font: 16px var(--font-body); }
.nla-mkw-bad__hint { margin: 0; color: var(--ink-3); font-size: 12px; }
.nla-mkw-bad__actions { display: flex; gap: var(--space-2); }
.nla-mkw-bad__actions .btn { flex: 1 1 0; }
@media (max-width: 900px) {
  .nla-mkw--post.is-typing .nla-mkw-btn--bad, .nla-mkw--post.is-typing .nla-mkw-pick, .nla-mkw--post.is-typing .nla-mkw-bad { display: none; }
}
@media (max-width: 380px) { .nla-mkw-opts { grid-template-columns: 1fr; } }
.nla-mk-opt__pick { margin: var(--space-2) 0 0; color: var(--ink-3); font-size: 12px; }
.nla-mk-opt__tag--on { color: #7d6017; font-weight: 600; }
.nla-mk-opt__lbl { display: block; margin-top: var(--space-2); color: var(--ink-3); font-family: var(--font-label); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; }
.nla-mk-opt.is-on { border-width: 2px; }
.nla-mk-opt__self { align-self: flex-start; }
.nla-mk-d__bad { margin-left: 4px; }
.nla-mk-d__badpanel { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); padding: var(--space-3); border: 1px solid var(--hairline-2); border-radius: var(--r-sm); background: var(--porcelain); }
.nla-mk-d__badnote { width: 100%; padding: 6px 10px; border: 1px solid var(--hairline-2); border-radius: var(--r-sm); font: inherit; }
/* Dot 2: so may dang bat thong bao day, dong nho duoi nhan "Duyet caption". */
.nla-mks { display: grid; max-width: 980px; gap: var(--space-4); }
.nla-mks__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-3); }
.nla-mks__title { margin: 0; color: var(--ink); font-family: var(--font-display); font-size: 30px; font-weight: 300; }
.nla-mks__sub { margin: var(--space-1) 0 0; color: var(--ink-3); font-size: 13px; }
.nla-mks__block { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); }
.nla-mks__h2 { margin: 0 0 var(--space-1); color: var(--ink); font-size: 15px; font-weight: 700; }
.nla-mks__row { display: grid; grid-template-columns: minmax(150px, 1.1fr) 2fr minmax(70px, auto); align-items: center; gap: var(--space-3); font-size: 13px; }
.nla-mks__bar { height: 12px; overflow: hidden; border-radius: var(--r-pill); background: var(--stone-2); }
.nla-mks__fill { display: block; height: 100%; border-radius: var(--r-pill); background: var(--gold); }
.nla-mks__fill--pa1_edit, .nla-mks__fill--pa2_edit { background: var(--gold-bright); opacity: .7; }
.nla-mks__fill--self { background: var(--ink-3); }
.nla-mks__num { color: var(--ink-2); text-align: right; white-space: nowrap; }
.nla-mks__trow { display: grid; grid-template-columns: minmax(120px, 2fr) repeat(3, minmax(70px, 1fr)); gap: var(--space-2); padding: 6px 0; border-bottom: 1px solid var(--stone-line); font-size: 13px; }
.nla-mks__trow--head { color: var(--ink-3); font-family: var(--font-label); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; }
.nla-mks__note { margin: 0; color: var(--ink-3); font-size: 12px; }
.nla-mks__post { border-bottom: 1px solid var(--stone-line); }
.nla-mks__postbtn { width: 100%; min-height: 40px; padding: 8px 0; border: 0; background: transparent; color: var(--ink-2); font: 13px var(--font-body); text-align: left; cursor: pointer; }
.nla-mks__post.is-open .nla-mks__postbtn { color: var(--ink); font-weight: 600; }
.nla-mks__compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3); padding: 0 0 var(--space-3); }
.nla-mks__col { padding: var(--space-2) var(--space-3); border: 1px solid var(--hairline-2); border-radius: var(--r-sm); background: var(--porcelain); }
.nla-mks__collbl { margin-bottom: 4px; color: var(--ink-3); font-family: var(--font-label); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; }
.nla-mks__text { margin: 0; color: var(--ink-2); font-size: 13px; line-height: 1.5; white-space: pre-wrap; }
.nla-mks__text.is-empty { color: var(--ink-3); font-style: italic; }
.nla-mks__text del { background: var(--danger-bg); color: var(--danger); }
.nla-mks__text ins { background: var(--gold-soft); color: #7d6017; text-decoration: none; }
@media (max-width: 640px) {
  .nla-mks__row { grid-template-columns: 1fr minmax(64px, auto); }
  .nla-mks__bar { grid-column: 1 / -1; grid-row: 2; }
}

/* ---------- Dot 3 (Hai 03.11.2026): poster / khuyen mai. Mockup poster-dot3-v2 da duyet: chip toi "Poster" (the, chi tiet,
   lich, trang Viet caption), dong nhac duoi nut Duyet (mau --team-b-ink nhu mockup) va dong nhac tren nut Luu o dien thoai. ---------- */
.nla-mk-poster { display: inline-block; padding: 2px 9px; border-radius: var(--r-pill); background: var(--wood); color: var(--wood-cream); font-family: var(--font-label); font-size: 11px; font-weight: 700; letter-spacing: .04em; line-height: 1.4; vertical-align: 1px; white-space: nowrap; }
.nla-mk-d__title .nla-mk-poster { vertical-align: 3px; }
.nla-mkc-post__txt .nla-mk-poster { padding: 0 6px; font-size: 10px; }
.nla-mk-d__poster-hint { margin: var(--space-2) 0 0; color: var(--team-b-ink); font-size: 12.5px; }
.nla-mkw-poster-note { margin: 0; color: var(--ink-2); font-size: 12.5px; }

/* 865 Chi tieu tuan (hop tren trang Marketing, chi super). */
.nla-mk__quota-btn { padding: 11px 20px; font-size: 12px; }
.nla-mk-quota__note { margin: 0 0 var(--space-4); color: var(--ink-3); font-size: 13px; line-height: 1.45; }
.nla-mk-quota { width: 100%; border-collapse: collapse; font-size: 14px; }
.nla-mk-quota th, .nla-mk-quota td { padding: 6px 4px; text-align: center; border-top: 1px solid var(--hairline); }
.nla-mk-quota thead th { border-top: 0; color: var(--ink-3); font-size: 12px; font-weight: 600; padding-bottom: 8px; }
.nla-mk-quota th[scope="row"], .nla-mk-quota thead th:first-child { text-align: left; font-weight: 600; color: var(--ink); }
.nla-mk-quota tfoot td, .nla-mk-quota tfoot th { background: var(--gold-soft); font-weight: 700; }
.nla-mk-quota__num { width: 56px; height: 38px; border: 1px solid var(--hairline-2); border-radius: var(--r-sm); text-align: center;
  font: inherit; font-size: 15px; background: var(--porcelain); color: var(--ink); }
.nla-mk-quota__num:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
.nla-mk-quota__num.is-bad { border-color: var(--danger); }
.nla-mk-quota__last { margin: var(--space-3) 0 0; color: var(--ink-3); font-size: 12px; }
.nla-mk-quota__err { margin: var(--space-3) 0 0; color: var(--danger); font-size: 13px; font-weight: 600; }

/* ---------- 870 Giao viec + kho Y tuong (views/mkt-giao-viec.js, views/mkt-y-tuong.js; mockup-web-giao-viec.html da duyet).
   Bang ke hoach cung cau truc bang "Tuan nay" cua app: dai brand nen dam chu trang, Chua gui > 0 do / = 0 xanh, dong Tong nen vang nhat. ---------- */
.nla-nav a.nla-nav__sub { padding-left: calc(var(--space-3) * 2.6); font-size: 11px; }
.nla-mkg, .nla-mky { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.nla-mky { max-width: 980px; }
.nla-mkg__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.nla-mkg__title { margin: 0; color: var(--ink); font-family: var(--font-display); font-size: 30px; font-weight: 300; }
.nla-mkg__weekbox { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.nla-mkg-week { display: inline-flex; align-items: center; gap: var(--space-2); padding: 4px 8px; border: 1px solid var(--stone-line); border-radius: 9px; background: var(--porcelain); color: var(--ink); font-size: 13px; font-weight: 700; }
.nla-mkg-week__nav { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--r-xs); background: transparent; color: var(--gold); cursor: pointer; }
.nla-mkg-week__nav:hover { background: var(--gold-soft); }
.nla-mkg__cols { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; gap: var(--space-4); }
.nla-mkg__left, .nla-mkg__right { display: grid; gap: var(--space-3); min-width: 0; }
/* 896: trang Marketing cua quan ly tong khong super: mot cot (khong co kho y tuong ben phai), rong toi da nhu cot trai. */
.nla-mkg__cols--one { grid-template-columns: minmax(0, 1fr); max-width: 980px; }
.nla-mkg-card { min-width: 0; padding: var(--space-3); }
.nla-mkg-card__h { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-2); }
.nla-mkg-card__h small { color: var(--ink-3); font-size: 12px; font-weight: 600; }
.nla-mkg-card__title { margin: 0; color: var(--ink); font-size: 14px; font-weight: 700; }
.nla-mkg-scroll { overflow-x: auto; }
.nla-mkg-plan, .nla-mkg-items { width: 100%; border-collapse: collapse; font-size: 13px; }
.nla-mkg-plan th, .nla-mkg-items th { padding: 5px; color: var(--ink-3); font-size: 11.5px; font-weight: 600; text-align: center; white-space: nowrap; }
.nla-mkg-plan td, .nla-mkg-items td { padding: 7px 5px; border-top: 1px solid var(--stone-line); text-align: center; }
.nla-mkg-plan .is-left, .nla-mkg-items .is-left, .nla-mkg-plan td.nla-mkg-plan__kind { text-align: left; }
.nla-mkg-plan__band td { border-top: 5px solid var(--porcelain); background: var(--ink); color: var(--porcelain); font-weight: 800; text-align: left; }
.nla-mkg-plan__total td { background: var(--gold-soft); font-weight: 700; }
.nla-mkg-plan td.is-default { color: var(--ink-3); }
.nla-mkg-plan__unsent { font-weight: 800; }
.nla-mkg-plan__unsent.is-red { background: var(--danger-bg); color: #b00020; }
.nla-mkg-plan__unsent.is-green { background: var(--ok-bg); color: var(--ok-line); }
/* Bam so bang Ke hoach (Hai chon A 09.11.2026): so > 0 la nut, gach chan cham; 0 thi xam, khong bam. */
.nla-mkg-plan__n, .nla-mkg-plan__lbl { padding: 0 5px; min-width: 26px; border: 0; border-radius: 6px; background: transparent; color: inherit; font: inherit; text-decoration: underline dotted 1px; text-underline-offset: 3px; cursor: pointer; }
.nla-mkg-plan__lbl { padding: 0 2px; min-width: 0; text-decoration: none; }
.nla-mkg-plan__lbl::after { content: " \203A"; color: var(--gold); }
.nla-mkg-plan__n:hover, .nla-mkg-plan__n:focus-visible { background: var(--gold-soft); color: var(--oak-deep); text-decoration-style: solid; outline: none; }
.nla-mkg-plan__lbl:hover, .nla-mkg-plan__lbl:focus-visible { color: var(--oak-deep); outline: none; text-decoration: underline; }
.nla-mkg-plan__zero { color: #b9b1a6; }
.nla-mkg-listdlg { width: min(560px, 94vw); }
.nla-mkg-list__chips { margin: 2px 0 10px; }
.nla-mkg-list__chips .nla-mk-chip:disabled { border-color: var(--stone-line); background: transparent; color: #b9b1a6; cursor: default; }
.nla-mkg-list__ul { margin: 0; padding: 0; list-style: none; max-height: min(60vh, 520px); overflow-y: auto; }
.nla-mkg-list__row { display: flex; gap: 10px; padding: 9px 0; border-top: 1px solid var(--stone-line); }
.nla-mkg-list__row:first-child { border-top: 0; }
.nla-mkg-list__txt { flex: 1; min-width: 0; }
.nla-mkg-list__t { margin: 0; color: var(--ink); font-size: 13px; font-weight: 700; line-height: 1.35; }
.nla-mkg-list__m { margin: 1px 0 0; color: var(--ink-3); font-size: 12px; }
.nla-mkg-list__red { color: #b00020; font-weight: 600; }
.nla-mkg-list__tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; }
.nla-mkg-list__sample { margin-top: 4px; }
.nla-mkg-list__sum { margin: 6px 0 0; color: var(--ink-3); font-size: 12px; text-align: right; }
.nla-mkg-list__wait, .nla-mkg-list__err { display: flex; align-items: center; gap: 10px; padding: 14px 0; color: var(--ink-3); font-size: 13px; }
.nla-mkg-list__err p { margin: 0; }
.nla-mkg-tag { display: inline-block; padding: 1px 7px; border-radius: 7px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.nla-mkg-tag--done { background: var(--ok-bg); color: var(--ok-line); }
.nla-mkg-tag--ok { background: #e7eefc; color: #2c4f9e; }
.nla-mkg-tag--wait { background: #FFF1D6; color: #8a5a00; }
.nla-mkg-tag--off { background: var(--stone-2); color: var(--ink-3); }
.nla-mkg-tag--carry { background: var(--gold-soft); color: #7A5A00; }
.nla-mkg-tag--late { background: var(--danger-bg); color: var(--danger); }
.nla-mkg-items td { white-space: nowrap; }
.nla-mkg-items td.is-left { min-width: 120px; white-space: normal; }
.nla-mkg-items tr.is-removed td { color: var(--ink-3); }
.nla-mkg-items__title { color: var(--ink); }
.nla-mkg-qty { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.nla-mkg-qty svg { color: var(--ink-3); }
.nla-mkg-muted { color: var(--ink-3); font-size: 12px; }
.nla-mkg-pill { display: inline-block; padding: 2px 7px; border-radius: 7px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.nla-mkg-pill--done { background: var(--ok-bg); color: var(--ok-line); }
.nla-mkg-pill--doing { background: var(--gold-soft); color: var(--oak-deep); }
.nla-mkg-pill--late, .nla-mkg-pill--pending { background: #FFF1D6; color: #8a5a00; }
.nla-mkg-pill--removed { background: var(--stone-2); color: var(--ink-3); }
.nla-mkg-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 5px 11px; border: 1px solid var(--gold); border-radius: 8px; background: var(--gold); color: #fff; font: 700 12.5px var(--font-body); text-decoration: none; white-space: nowrap; cursor: pointer; }
.nla-mkg-btn:hover:not(:disabled) { background: var(--gold-bright); border-color: var(--gold-bright); }
.nla-mkg-btn--o { background: var(--porcelain); color: var(--gold); }
.nla-mkg-btn--o:hover:not(:disabled) { background: var(--gold-soft); color: var(--gold); border-color: var(--gold); }
.nla-mkg-btn--r { border-color: #b00020; background: var(--porcelain); color: #b00020; }
.nla-mkg-btn--r:hover:not(:disabled) { background: var(--danger-bg); border-color: #b00020; }
.nla-mkg-btn:disabled { cursor: default; opacity: .55; }
.nla-mkg-more { margin-top: var(--space-2); }
.nla-mkg-ai { padding: 8px 10px; border: 1px dashed var(--gold); border-radius: 10px; background: #fffaf0; }
.nla-mkg-ai__title { font-size: 13px; }
.nla-mkg-ai__open { margin-top: 6px; }
.nla-mkg-ai__list { display: grid; gap: 6px; margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.nla-mkg-ai__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); padding-top: 6px; border-top: 1px solid var(--hairline); }
.nla-mkg-ai__txt { display: grid; gap: 2px; font-size: 13px; }
.nla-mkg-ai__btns { display: flex; gap: 6px; }
.nla-mkg-chips { margin-bottom: var(--space-2); }
.nla-mkg-idea { display: flex; gap: 10px; padding: 9px 0; border-top: 1px solid var(--stone-line); }
.nla-mkg-idea:first-of-type { border-top: 0; }
.nla-mkg-idea.is-hidden { opacity: .6; }
.nla-mkg-idea__th { position: relative; display: flex; flex: 0 0 96px; align-items: center; justify-content: center; height: 120px; overflow: hidden; border-radius: 8px; background: linear-gradient(135deg, #5b6f8a, #2f3d52); color: #fff; }
.nla-mkg-idea__th.is-photo { background: linear-gradient(135deg, #d8c3a3, #a5835e); }
.nla-mkg-idea__th.is-play { border: 0; padding: 0; cursor: pointer; font: inherit; }
.nla-mkg-idea__th.is-play:hover, .nla-mkg-idea__th.is-play:focus-visible { filter: brightness(1.12); outline: 2px solid var(--gold); outline-offset: 2px; }
/* Anh nho that (Hai duyet mockup 09.11.2026): 2B 96x120 o Kho / trang Y tuong, sm o dai may goi y + hop sua, xs o bang viec. */
.nla-mkg-idea__th.is-sm { flex-basis: 44px; height: 56px; border-radius: 7px; }
.nla-mkg-idea__th.is-xs { flex-basis: 36px; height: 45px; border-radius: 6px; }
.nla-mkg-idea__th.is-none { border: 1px dashed var(--hairline-2); background: var(--stone-2); color: var(--ink-3); }
.nla-mkg-idea__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nla-mkg-idea__pl { position: absolute; top: 50%; left: 50%; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; transform: translate(-50%, -50%); }
.nla-mkg-idea__th.is-sm .nla-mkg-idea__pl { width: 22px; height: 22px; }
.nla-mkg-idea__th.is-xs .nla-mkg-idea__pl { width: 18px; height: 18px; }
.nla-mkg-idea__pl svg { fill: currentColor; }
.nla-mkg-idea__badge { position: absolute; bottom: 4px; left: 4px; padding: 1px 5px; border-radius: 5px; background: rgba(0, 0, 0, .6); color: #fff; font-size: 10px; font-weight: 700; line-height: 1.4; }
.nla-mkg-idea__th.is-xs .nla-mkg-idea__badge { display: none; }
/* O chu khi khong co anh (Hai chon kieu 1, 13.11.2026): nen kem, icon loai bai, ten trang, @tai khoan. */
.nla-mkg-idea__th.is-tile { border: 1px solid var(--hairline); background: var(--cream); color: var(--ink-2); text-decoration: none; }
.nla-mkg-idea__th.is-tile.is-play:hover, .nla-mkg-idea__th.is-tile.is-play:focus-visible { filter: none; background: var(--stone-2); }
a.nla-mkg-idea__th.is-tile:hover, a.nla-mkg-idea__th.is-tile:focus-visible { background: var(--stone-2); outline: 2px solid var(--gold); outline-offset: 2px; }
.nla-mkg-tile { display: flex; flex-direction: column; align-items: center; gap: 4px; max-width: 100%; padding: 0 6px; text-align: center; }
.nla-mkg-tile__site { color: var(--ink); font-size: 11.5px; font-weight: 700; line-height: 1.2; }
/* BAN THU (khong gop): khung nhung Instagram thu nho CA khung (transform), khong cat / phu; bam xuyen qua vao nut. */
.nla-mkg-embed { position: absolute; top: 0; left: 0; border: 0; background: #fff; transform-origin: 0 0; pointer-events: none; }
.nla-mkg-idea__th.is-embed-lg { flex-basis: 240px; height: 340px; }
.nla-mkg-idea__th.is-grid.is-embed-lg { height: 340px; }
.nla-mkg-tile__acc { max-width: 100%; overflow: hidden; color: var(--ink-3); font-size: 10.5px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.nla-mkg-ai__l { display: flex; flex: 1; align-items: center; gap: 9px; min-width: 0; }
.nla-mkg-items__task { display: flex; align-items: center; gap: 8px; }
.nla-mkg-dlg__sample { display: flex; align-items: center; gap: 10px; }
.nla-mkg-dlg__sampletxt { display: grid; gap: 2px; min-width: 0; }
.nla-mkg-stat { display: inline-block; margin-top: 4px; padding: 1px 8px; border-radius: 7px; background: var(--ok-bg); color: var(--ok-line); font-size: 11.5px; font-weight: 700; }
.nla-mkg-play { justify-self: start; margin-top: 4px; padding: 0; border: 0; background: none; color: var(--gold); font: inherit; font-size: 13px; font-weight: 700; text-align: left; cursor: pointer; }
.nla-mkg-play:hover { text-decoration: underline; }
.nla-mkg-play svg { vertical-align: -2px; fill: currentColor; }
.nla-mkg-nosample { margin-top: 2px; font-style: italic; }
.nla-mkg-player { width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #111; }
.nla-mkg-player.is-tall { width: min(340px, 100%); aspect-ratio: 9 / 16; max-height: 70vh; margin: 0 auto; }
.nla-mkg-player iframe { display: block; width: 100%; height: 100%; border: 0; }
.nla-mkg-player__out { display: inline-block; margin-top: 10px; }
.nla-mkg-idea__body { display: grid; flex: 1; gap: 2px; min-width: 0; }
.nla-mkg-idea__title { color: var(--ink); font-size: 13.5px; font-weight: 700; }
.nla-mkg-idea__how { white-space: pre-wrap; }
.nla-mkg-idea__act { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.nla-mkg-dlg { display: grid; gap: var(--space-2); min-width: min(440px, 80vw); }
.nla-mkg-dlg__sub { margin: 0; }
.nla-mkg-dlg__after { margin: 0; }
.nla-mkg-f { display: grid; gap: 5px; min-width: 0; }
.nla-mkg-f__l { color: var(--ink-3); font-size: 12px; font-weight: 700; }
.nla-mkg-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.nla-mkg-input, .nla-mkg-box { box-sizing: border-box; width: 100%; min-height: 38px; padding: 8px 10px; border: 1px solid var(--stone-line); border-radius: 8px; background: #fafafa; color: var(--ink); font: 13px var(--font-body); }
.nla-mkg-input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
.nla-mkg-note { resize: vertical; }
.nla-mkg-stepper { display: flex; align-items: center; justify-content: space-between; padding: 0 4px; }
.nla-mkg-stepper button { width: 32px; height: 32px; padding: 0; border: 0; background: transparent; color: var(--gold); font-size: 18px; font-weight: 800; cursor: pointer; }
.nla-mkg-stepper button:disabled { opacity: .35; cursor: default; }
.nla-mkg-err { margin: 0; color: var(--danger); font-size: 13px; font-weight: 600; }
.nla-mky__filters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); max-width: 720px; }
.nla-mky__sel { display: grid; gap: 4px; min-width: 0; }
.nla-mky__sel.is-set .nla-mkg-input { border-color: var(--gold); background: var(--gold-soft); }
.nla-mky__back { display: inline-flex; align-items: center; gap: 4px; justify-self: start; margin-bottom: calc(-1 * var(--space-2)); color: var(--gold); font-size: 13px; font-weight: 700; text-decoration: none; }
.nla-mky__back:hover { text-decoration: underline; }
@media (max-width: 640px) { .nla-mky__filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.nla-mky__hidden { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font-size: 13px; }
.nla-mky__link { color: var(--gold); font-size: 12.5px; font-weight: 600; }
.nla-mky-step { display: grid; grid-template-columns: 22px minmax(0, 1fr) 80px 32px; align-items: center; gap: 6px; margin-bottom: 6px; }
.nla-mky-step__n { color: var(--ink-3); font-size: 12px; font-weight: 700; text-align: center; }
.nla-mky-step__x { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; background: transparent; color: var(--ink-3); cursor: pointer; }
.nla-mky-step__add { justify-self: start; }
@media (max-width: 900px) {
  .nla-mkg__cols { grid-template-columns: minmax(0, 1fr); }
  .nla-mkg__title { font-size: 24px; }
}
@media (max-width: 520px) {
  .nla-mkg-row2 { grid-template-columns: 1fr; }
  .nla-mkg-idea__th { flex-basis: 48px; height: 60px; }
}
/* ---------- 871 Tai len + trang Tiem (views/mkt-tai-len.js, views/mkt-tiem.js; mockup v22 buoc 14 + mockup-web-tiem-lam-lai.html).
   Dung lai .nla-mkg-* (the, nut, o nhap) cua 870 va .nla-mk-chip cua man Marketing; o day chi phan rieng. ---------- */
.nla-mkup, .nla-mksh { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.nla-mkup__cols { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; gap: var(--space-4); }
.nla-mkup-form { display: grid; gap: var(--space-3); }
.nla-mkup-drop { padding: 10px; border: 1.5px dashed var(--stone-line); border-radius: 10px; background: #fafafa; }
.nla-mkup-drop.is-over { border-color: var(--gold); background: var(--gold-soft); }
.nla-mkup-drop__hint { margin: 8px 0 0; text-align: center; }
.nla-mkup-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.nla-mkup-tile { display: grid; gap: 4px; min-width: 0; }
.nla-mkup-tile__th { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; overflow: hidden; border: 1px solid var(--stone-line); border-radius: 9px; background: linear-gradient(135deg, #d8c3a3, #a5835e); color: #fff; }
.nla-mkup-tile[data-mkup-kind="video"] .nla-mkup-tile__th { background: linear-gradient(135deg, #5b6f8a, #2f3d52); }
.nla-mkup-tile[data-mkup-kind="pdf"] .nla-mkup-tile__th { background: var(--stone-2); color: var(--ink-2); }
.nla-mkup-tile.is-bad .nla-mkup-tile__th { border: 2px solid #b00020; }
.nla-mkup-tile__img { width: 100%; height: 100%; object-fit: cover; }
.nla-mkup-tile__icon { display: inline-flex; }
.nla-mkup-tile__x { position: absolute; top: 4px; right: 4px; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: rgba(33, 29, 25, .65); color: #fff; cursor: pointer; }
.nla-mkup-tile__x:disabled { opacity: .4; cursor: default; }
.nla-mkup-tile__bar { position: absolute; left: 0; bottom: 0; height: 4px; background: var(--gold); }
.nla-mkup-tile__name { overflow: hidden; color: var(--ink-2); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.nla-mkup-tile__st { color: var(--ink-3); font-size: 11.5px; font-weight: 600; }
.nla-mkup-tile.is-bad .nla-mkup-tile__st { color: #b00020; }
.nla-mkup-tile.is-done .nla-mkup-tile__st { color: var(--ok-line); }
.nla-mkup-angle { min-height: 32px; padding: 5px 6px; font-size: 12px; }
.nla-mkup-angle.is-empty { border-color: var(--gold); color: var(--gold); font-weight: 700; }
.nla-mkup-add { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; border: 1.5px dashed var(--gold); border-radius: 9px; background: var(--porcelain); color: var(--gold); cursor: pointer; }
.nla-mkup-add:hover:not(:disabled) { background: var(--gold-soft); }
.nla-mkup-add:disabled { opacity: .5; cursor: default; }
.nla-mkup-toggle { display: grid; gap: 4px; }
.nla-mkup-toggle p { margin: 0; }
.nla-mkup-toggle__row { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.nla-mkup-toggle__l { color: var(--ink); font-size: 13.5px; font-weight: 700; }
.nla-mkup-why { margin: 0; }
.nla-mkup-send { width: 100%; min-height: 42px; font-size: 14px; }
.nla-mkup-mine { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.nla-mkup-mine__row { display: flex; align-items: flex-start; gap: 8px; padding: 8px 0; border-top: 1px solid var(--stone-line); font-size: 13px; }
.nla-mkup-mine__row:first-child { border-top: 0; }
.nla-mkup-mine__ic { display: inline-flex; flex: 0 0 auto; padding-top: 1px; color: var(--ink-3); }
.nla-mkup-mine__txt { min-width: 0; color: var(--ink); }
.nla-mkup-mine__why { display: block; margin-top: 2px; color: #b00020; font-size: 12px; }
.nla-mkup-pill, .nla-mksh-pill { display: inline-block; padding: 2px 7px; border-radius: 7px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.nla-mkup-pill--pending { background: var(--gold-soft); color: var(--oak-deep); }
.nla-mkup-pill--stored, .nla-mkup-pill--posted, .nla-mksh-pill--done { background: var(--ok-bg); color: var(--ok-line); }
.nla-mkup-pill--rejected, .nla-mkup-pill--failed, .nla-mksh-pill--bad, .nla-mksh-pill--late { background: var(--danger-bg); color: #b00020; }
.nla-mksh-pill--redo { background: #FFF1D6; color: #8a5a00; }
.nla-mksh__tabs { margin-bottom: var(--space-3); }
.nla-mksh-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.nla-mksh-table th { padding: 8px 10px; background: #faf8f4; color: var(--ink-3); font-size: 12px; font-weight: 600; text-align: left; white-space: nowrap; }
.nla-mksh-table td { padding: 9px 10px; border-top: 1px solid var(--stone-line); white-space: nowrap; }
.nla-mksh-table tr.is-overdue td { background: var(--danger-bg); }
.nla-mksh__pick { width: 28px; }
.nla-mksh__pick input, .nla-mksh-chk input { width: 16px; height: 16px; accent-color: var(--gold); }
.nla-mksh-dlg { min-width: min(460px, 82vw); }
.nla-mksh-x { display: inline-flex; align-items: center; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; }
.nla-mksh-chk { display: flex; align-items: center; gap: 6px; color: var(--ink); font-size: 13px; }
.nla-mksh-angles { margin: 2px 0 6px 22px; }
.nla-mksh-angles .nla-mk-chip { min-height: 28px; padding: 3px 10px; font-size: 12.5px; }
@media (max-width: 900px) {
  .nla-mkup__cols { grid-template-columns: minmax(0, 1fr); }
}

/* ===== 886 Giao viec anh tiem: the "Anh tiem tuan N" (trang Giao viec) + dong goi y / sau khi giao trong hop Tiem ===== */
.nla-mkst-table td.is-left { min-width: 90px; }
.nla-mkst-table tr.is-overdue td { background: var(--danger-bg); }
.nla-mkst-prog { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.nla-mkst-prog__bar { display: inline-block; width: 64px; height: 6px; border-radius: 99px; background: var(--stone-2); overflow: hidden; }
.nla-mkst-prog__bar i { display: block; height: 100%; background: var(--gold); border-radius: 99px; }
.nla-mkst-prog__bar.is-ok i { background: var(--ok-line); }
.nla-mkst-prog__bar.is-late i { background: #b00020; }
.nla-mkst-pill--open { background: var(--gold-soft); color: var(--oak-deep); }
.nla-mkst-pill--late { background: var(--danger-bg); color: #b00020; }
.nla-mkst-pill--done { background: var(--ok-bg); color: var(--ok-line); }
.nla-mksh-hint { margin: 2px 0 0; color: var(--ink-3); font-size: 12px; }
.nla-mksh-after { margin: 2px 0 0; color: var(--ink-3); font-size: 12px; line-height: 1.45; }
/* Goi y caption tach khoi cach quay (plan 2026-11-10-mkt-goi-y-caption muc 6, mockup Hai duyet 10.11): nhan nho + khoi vien vang
   net dut chi super thay. */
.nla-mky__lbl { display: block; margin-top: 6px; color: var(--ink-3); font-family: var(--font-label); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; }
.nla-mky__cap { padding: 6px 8px; border: 1px dashed var(--gold); border-radius: 8px; background: #fffbf2; color: var(--ink-2); font-size: 12.5px; white-space: pre-wrap; }
/* Giao viec v2 (plan 2026-11-10-mkt-giao-viec-v2, Hop dong 4): nut "+ Them viec" ben phai khung "Co N viec cho chot" (hoac
   tieu de "Viec da giao" khi khung do an), dong nhac y tuong da giao cho brand khac (khong chan nut). */
.nla-mkg-ai__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.nla-mkg-card__hr { display: flex; align-items: center; gap: var(--space-2); }
.nla-mkg-dup { margin: 6px 0 0; padding: 4px 8px; border-radius: 6px; background: var(--gold-soft); color: #7d6017; font-size: 12.5px; }
/* AI phan tich video mau + y tuong hai ngon ngu (plan 2026-11-11-mkt-video-ai-hai-ngon-ngu muc 6, mockup-video-ai.html Hai duyet;
   B: mot phan "Cach quay", khong nhan nguon). Chip trang thai viec AI, bang buoc, tab VI / CS trong hop sua va o ghi chu. */
.nla-mky-vchip { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; }
.nla-mky-vchip--wait { background: var(--stone-2); color: var(--ink-2); }
.nla-mky-vchip--run { background: #E8EEF8; color: #2F4F7F; }
.nla-mky-vchip--bad { background: var(--danger-bg); color: var(--danger); }
.nla-mky-steps { margin-top: 4px; font-size: 12.5px; }
.nla-mky-steps > summary { color: var(--ink-3); cursor: pointer; }
.nla-mky-stbl { width: 100%; margin-top: 6px; border-collapse: collapse; font-size: 12.5px; }
.nla-mky-stbl th, .nla-mky-stbl td { padding: 5px 8px; border-top: 1px solid var(--stone-2); text-align: left; vertical-align: top; }
.nla-mky-stbl th { color: var(--ink-3); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.nla-mky-stbl td:nth-child(-n+2) { white-space: nowrap; color: var(--ink-3); }
.nla-mky-tabs { margin: 0; }
.nla-mky-tabs .nla-mk-chip { min-height: 28px; padding: 3px 12px; font-size: 12px; }
.nla-mky-pane { display: grid; gap: var(--space-2); }
.nla-mky-pane[hidden], .nla-mkg-note[hidden] { display: none; }
.nla-mky-step.has-more { grid-template-rows: auto auto; }
.nla-mky-step__more { grid-column: 2 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
.nla-mky-step__secro { color: var(--ink-3); font-size: 12px; text-align: center; }
.nla-mky-redo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.nla-mky-redo .nla-mkg-muted { font-size: 12px; }
.nla-mkg-note__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; }
@media (max-width: 520px) { .nla-mky-step__more { grid-template-columns: minmax(0, 1fr); } }
/* Tim y tuong moi + Cai dat tim y tuong (plan 2026-11-11-mkt-tim-y-tuong-cai-dat muc 6 + 14A, mockup-tim-y-tuong.html va
   mockup-tim-theo-noi-dung.html Hai duyet 11.11; views/mkt-y-tuong.js, views/mkt-tim-cai-dat.js). Chi super. */
.nla-mkf { display: grid; gap: var(--space-2); }
.nla-mkf .nla-mkg-note { min-height: 0; }
.nla-mkf__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.nla-mkf__bar .nla-mkg-btn { gap: 6px; }
.nla-mkf__st { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.nla-mkf__st:empty { display: none; }
.nla-mkf__id { padding: 0 2px; border: none; background: none; color: var(--gold); font: 700 12px var(--font-body); cursor: pointer; text-decoration: underline; }
.nla-mkf__left, .nla-mkf__nomatch { margin: 0; }
/* ---------- Kho y tuong luoi anh (views/mkt-giao-viec.js; Hai duyet "Cach 2" 11.11.2026, mockup-kho-y-tuong-gon.html) ---------- */
.nla-mkg-lib__h { flex-wrap: wrap; }
.nla-mkg-lib__ht { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; min-width: 0; }
.nla-mkg-lib__find { margin-bottom: var(--space-2); }
.nla-mkg-lib__find:empty { display: none; }
.nla-mkg-lib__find .nla-mkf { padding: var(--space-2); border-radius: 10px; box-shadow: none; background: #fffbf2; border-color: #ead9a8; }
.nla-mkg-lib__bar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-2); }
.nla-mkg-lib__bar .nla-mkg-input { width: auto; min-height: 34px; padding: 6px 10px; font-size: 12.5px; }
.nla-mkg-lib__q { flex: 1 1 140px; min-width: 120px; }
.nla-mkg-lib__sel { flex: 0 1 auto; max-width: 100%; }
.nla-mkg-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.nla-mkg-gcard { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 8px; border: 1px solid var(--stone-line); border-radius: 12px; background: var(--porcelain); }
.nla-mkg-gcard__open { display: flex; flex-direction: column; gap: 6px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.nla-mkg-gcard__open:hover .nla-mkg-gcard__t { color: var(--gold); }
.nla-mkg-gcard__open:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 8px; }
.nla-mkg-idea__th.is-grid { flex: none; width: 100%; height: 120px; }
.nla-mkg-gcard__t { display: -webkit-box; min-height: 2.7em; overflow: hidden; color: var(--ink); font-size: 13px; font-weight: 700; line-height: 1.35; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.nla-mkg-gcard__foot { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: auto; }
.nla-mkg-gcard__chip { display: inline-block; max-width: 100%; padding: 1px 8px; border-radius: 999px; background: var(--ok-bg); color: var(--ok-line); font-size: 11.5px; font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; }
.nla-mkg-gcard__pick { min-height: 28px; padding: 3px 12px; border-radius: 999px; font-size: 12px; }
/* An y tuong (Hai duyet mockup-an-y-tuong.html 12.11.2026): "Giao" + "An" canh nhau; the da an mo anh, chu xam, nhan "Da an";
   "An y tuong" o hop chi tiet = chu gach chan xam ben trai hang nut. */
.nla-mkg-gcard__acts { display: flex; flex-wrap: wrap; gap: 6px; }
.nla-mkg-gcard.is-hidden .nla-mkg-idea__th { opacity: .55; }
.nla-mkg-gcard.is-hidden .nla-mkg-gcard__t { color: var(--ink-3); }
.nla-mkg-gcard__tag { display: inline-block; padding: 2px 6px; border-radius: 6px; background: var(--stone-2); color: var(--ink-3); font-size: 11px; line-height: 1.4; }
.nla-mkg-detaildlg .nla-mkg-detail__hide { margin-right: auto; padding-left: 0; padding-right: 0; background: none; color: var(--ink-3); font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: normal; text-transform: none; text-decoration: underline; text-underline-offset: 3px; }
.nla-mkg-detaildlg .nla-mkg-detail__hide:hover { background: none; color: var(--ink-2); }
.nla-mkg-detaildlg .nla-mkg-detail__hide:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.nla-mkg-lib__more { margin-top: var(--space-2); text-align: center; }
.nla-mkg-detail { display: grid; gap: var(--space-2); }
.nla-mkg-detail__top { display: flex; gap: 12px; align-items: flex-start; }
/* Hop chi tiet hai cot (Hai duyet mau 13.11.2026): trai = khung nhung co that (khong thu nho), phai = cach quay; hep = mot cot. */
.nla-modal.nla-mkg-detaildlg { max-width: 780px; }
.nla-mkg-detail--two { grid-template-columns: 326px minmax(0, 1fr); align-items: start; column-gap: var(--space-5); }
.nla-mkg-detail--one { grid-template-columns: minmax(0, 1fr); }
.nla-mkg-detail__media { display: grid; justify-items: start; gap: 0; min-width: 0; }
.nla-mkg-detail--one .nla-mkg-detail__media { justify-items: center; }
.nla-mkg-detail__media .nla-mkg-player { width: 326px; max-width: 100%; margin: 0; }
.nla-mkg-detail__media .nla-mkg-player.is-tall { width: 326px; max-height: none; }
.nla-mkg-detail__info { display: grid; gap: var(--space-2); min-width: 0; }
.nla-mkg-detail__txt { display: grid; gap: 4px; min-width: 0; }
.nla-mkg-detail__act { display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 520px) {
  .nla-mkg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nla-mkg-idea__th.is-grid { flex-basis: auto; height: 110px; }
  .nla-mkg-lib__sel { flex: 1 1 40%; }
}
/* Trang "Y tuong" = Kho rong ca trang (mockup-y-tuong-gop-kho.html, 12.11.2026): luoi 5 cot man rong, it cot hon khi hep.
   Chi trang Kho (.nla-mkg--kho); Kho o trang Marketing giu 3 cot. */
.nla-mkg--kho .nla-mkg-grid--wide { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1439px) { .nla-mkg--kho .nla-mkg-grid--wide { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1179px) { .nla-mkg--kho .nla-mkg-grid--wide { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) {
  .nla-mkg--kho .nla-mkg-grid--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nla-mkg-chips__sep { display: none; }
}
.nla-mkg-gcard__acc { display: block; max-width: 100%; color: var(--ink-3); font-size: 11.5px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nla-mkg-chips__sep { flex: 0 0 auto; width: 1px; height: 22px; margin: 0 4px; align-self: center; background: var(--stone-3); }
.nla-mky-vchip--ok { background: var(--ok-bg); color: var(--ok-line); }
.nla-mktc__panel { display: grid; gap: 6px; }
.nla-mktc__h { margin: 14px 0 2px; color: var(--ink-3); font-family: var(--font-label); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.nla-mktc__h:first-child { margin-top: 0; }
.nla-mktc__tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.nla-mktc__tbl th, .nla-mktc__tbl td { padding: 7px 8px; border-top: 1px solid var(--stone-2); text-align: left; vertical-align: middle; }
.nla-mktc__tbl th { color: var(--ink-3); font-size: 12px; font-weight: 600; }
.nla-mktc__n { font-variant-numeric: tabular-nums; white-space: nowrap; }
.nla-mktc__add { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.nla-mktc__info { flex-basis: 100%; }
.nla-mktc__row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 13.5px; }
.nla-mktc__num { width: 86px; min-height: 32px; padding: 4px 8px; }
.nla-mktc__num.is-bad { border-color: var(--danger); background: var(--danger-bg); }
.nla-mktc__foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
@media (max-width: 760px) { .nla-mktc__tbl { font-size: 12px; } }
/* May tu quan nguon Instagram (plan 2026-11-12 nguon-tu-dong muc 7; mockup-cai-dat-gap.html + mockup-nguon-tu-dong.html):
   chip chu de, Dieu kien gap, trang "Xem nguon" (views/mkt-tim-cai-dat.js, views/mkt-tim-nguon.js). */
.nla-mktc__chips { display: flex; flex-wrap: wrap; gap: 6px 4px; }
.nla-mktc__chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 11px; border: 1px solid var(--gold); border-radius: 99px; background: var(--gold-soft); font-size: 12.5px; }
.nla-mktc__chip i { font-style: normal; color: var(--ink-3); }
.nla-mktc__chipx { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border: none; border-radius: 99px; background: none; color: var(--ink-3); cursor: pointer; }
.nla-mktc__chipx:hover, .nla-mktc__chipx:focus-visible { background: #fff; color: var(--ink); }
.nla-mktc__chipx:disabled { opacity: .5; cursor: default; }
.nla-mktc__topicin { width: 220px; max-width: 100%; }
.nla-mktc__fold { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; width: 100%; margin-top: 14px; padding: 10px 0 0; border: none; border-top: 1px solid var(--stone-2); background: none; color: var(--ink); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; }
.nla-mktc__fold .nla-mkg-muted { font-size: 13px; }
.nla-mktc__cond { display: grid; gap: 6px; }
.nla-mktc__lane { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--stone-line); border-radius: 10px; font-size: 13.5px; }
.nla-mktc__dot { color: var(--ink-3); }
.nla-mktc__grp { display: inline-flex; flex-wrap: nowrap; align-items: center; gap: 6px; }
.nla-mktc__grp.is-wrap { flex-wrap: wrap; }
.nla-mktc__src { margin: 14px 0 0; font-size: 13px; }
.nla-mktc__avoid { display: grid; gap: 6px; margin-top: 8px; }
.nla-mktc__arow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 13px; }
.nla-mktc__areason { flex: 1 1 220px; min-width: 0; color: var(--ink); overflow-wrap: anywhere; }
.nla-mkh__idea { color: var(--ink); font-weight: 700; overflow-wrap: anywhere; }
.nla-mktc__link { color: var(--gold); font-weight: 700; text-decoration: underline; }
.nla-mktn__band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; padding: 10px 14px; border: 1px solid #EAD9A8; border-radius: 10px; background: #FFFBF2; font-size: 13.5px; }
.nla-mktn__band.is-bad { border-color: var(--danger); background: var(--danger-bg); color: var(--danger); }
.nla-mktn__p { margin: 4px 0 0; }
.nla-mktn__st { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.nla-mktn__st.is-ok { background: var(--ok-bg); color: var(--ok-line); }
.nla-mktn__st.is-bad { background: var(--danger-bg); color: var(--danger); }
.nla-mktn__st.is-wait { background: var(--stone-2); color: var(--ink-2); }
.nla-mktn__act { display: flex; flex-wrap: nowrap; justify-content: flex-end; gap: 6px; }
.nla-mktn__log { margin: 0; padding: 0; list-style: none; color: var(--ink-3); font-size: 13px; }
.nla-mktn__log li { padding: 2px 0; }
.nla-mktn__lane { margin-left: 6px; }