/* Design token — CHOT lai 2026-07-28 (lan 2): CHI xanh navy + xanh duong ruc
   ro + trang — bo han tim/hong, phong cach sang/nang luong kieu trinh duyet
   hien dai. Xem CLAUDE.md muc 7. Dung 1 file nay cho toan bo UI. */
:root {
  --color-bg: #f5f6fb;
  --color-surface: #ffffff;
  --color-surface-sunken: #eef1f8;
  --color-border: #e1e5ee;
  --color-text: #101a2e;
  --color-muted: #5b6478;
  --color-primary: #2f7dfa;
  --color-primary-hover: #1a63e0;
  --color-primary-soft: rgba(47, 125, 250, 0.12);
  /* Mau phu: CHI con cac sac xanh + trung tinh — KHONG doi xanh duong lam mau
     hanh dong chinh (nut/link), chi dung o icon/badge phan biet khu vuc. */
  --color-navy: #061b45;
  --color-sky: #0ea5e9;
  --color-amber: #f59e0b;
  --color-teal: #0d9488;
  --color-danger: #dc2626;
  --color-success: #0f9d68;
  --color-warning: #b7791f;
  --color-queued: #5b6478;
  --color-running: #2f7dfa;
  --color-done: #0f9d68;
  --color-error: #dc2626;
  --gradient-brand: linear-gradient(135deg, var(--color-navy) 0%, var(--color-primary) 100%);
  /* Sang tong the +10% (nhan RGB ca 2 mau voi 1.1, clamp 255):
     #2158af -> #2461c1, #2f7dfa -> #348aff. Goc toi van an toan (~5.9:1),
     goc sang nhat giam con ~3.37:1 (nguoi dung xac nhan "vay la ok"). */
  --gradient-button: linear-gradient(135deg, #2461c1 0%, #348aff 100%);
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(6, 27, 69, 0.05);
  --shadow: 0 1px 2px rgba(6, 27, 69, 0.04), 0 8px 20px -8px rgba(6, 27, 69, 0.12);
  --shadow-lg: 0 24px 60px -20px rgba(6, 27, 69, 0.4), 0 4px 16px -4px rgba(6, 27, 69, 0.1);
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "Consolas", "SFMono-Regular", Menlo, monospace;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

/* Tren desktop man hinh la MOT khung co dinh: `height` (khong phai min-height)
   + `overflow: hidden` o media query duoi — chi khung noi dung ben trong tu
   cuon. Mobile van cuon ca trang binh thuong vi 2 cot xep chong doc. */
body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-sans);
  background:
    radial-gradient(1100px 560px at 12% -12%, rgba(6, 27, 69, 0.09), transparent 60%),
    radial-gradient(900px 520px at 100% 0%, rgba(14, 165, 233, 0.08), transparent 55%),
    var(--color-bg);
  background-attachment: fixed;
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
}

.hidden {
  display: none !important;
}

.topbar {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.topbar::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--gradient-brand);
  opacity: 0.8;
}

.topbar-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.01em;
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--gradient-brand);
  box-shadow: 0 2px 8px -2px rgba(47, 125, 250, 0.55);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
}

.topbar-user {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px 14px;
  font-size: 14px;
  color: var(--color-muted);
}

.user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--gradient-brand);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-mono);
}

.topbar-consumer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.topbar-credit {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin: 0;
  padding: 4px 12px;
  background: var(--color-primary-soft);
  border-radius: 999px;
  font-size: 12px;
  color: var(--color-primary-hover);
  white-space: nowrap;
}

.topbar-credit strong {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.btn-sm {
  padding: 6px 12px;
  font-size: 13px;
}

/* Nut "Mua them luot" / "Doi mat khau" o topbar mo panel THA XUONG ngay
   duoi chinh no (khong con nam sau trong noi dung cuon) — .topbar-dropdown
   la moc dinh vi tuyet doi cho .dropdown-panel. */
.topbar-dropdown {
  position: relative;
}

.dropdown-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 20;
  width: max-content;
  min-width: 280px;
  max-width: min(360px, calc(100vw - 32px));
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px -8px rgba(23, 23, 31, 0.22);
  padding: 18px;
  text-align: left;
  color: var(--color-text);
}

.dropdown-panel h2 {
  font-size: 15px;
  margin: 0 0 12px;
}

.container {
  flex: 1 1 auto;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 20px 16px 48px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Man hinh dang nhap: can giua CA NGANG LAN DOC trong phan con lai cua
   viewport (duoi topbar), khong chi can giua theo chieu ngang nhu truoc. */
.container.centered {
  max-width: 1040px;
  justify-content: center;
  padding-top: 24px;
  padding-bottom: 24px;
}

/* JS bo class 'centered' dung luc hien dashboard — bo max-width/padding de
   dashboard-layout chiem tron be ngang, sidebar bam sat canh trai man hinh
   (giong app-shell that o C:\CRV, khong phai card nam lan trong noi dung). */
.container:not(.centered) {
  max-width: none;
  padding: 0;
  gap: 0;
}

.login-card {
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
}

/* Man hinh dang nhap = 2 cot: trai la panel gradient gioi thieu san pham
   (auth-visual, chi trang tri, aria-hidden), phai la form that (auth-panel).
   Tren mobile chi con 1 cot form + dai thuong hieu gon (auth-mobile-brand). */
/* Fade bang opacity thuan (KHONG transform) — .auth-shell co overflow:hidden
   + border-radius, animate transform tren chinh no gay loi Chrome: goc bo
   tron "vo" 1 lat luc animation chay/vua xong, lo hinh chu nhat cung mau
   gradient ben trong ra ngoai vung duoc bo goc (da gap thuc te, xem anh chup
   nguoi dung). Opacity khong dung compositor-transform nen khong dinh loi nay. */
@keyframes authFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.auth-shell {
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: authFadeIn 0.35s ease both;
}

/* Nen "spotlight" toi kem quang sang xanh giua tren — tham khao kieu card
   thue GPU (nen toi dac, quang sang lan toa lam diem nhan, chu trang/xam
   xanh doc de) thay vi gradient cheo 1 duong tu goc-goc phang. Khong dung
   transform nen khong dinh loi bo goc Chrome. */
.auth-visual {
  flex: 1 1 44%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
  padding: 52px 44px;
  /* Toi goc trai-tren, sang dan xuong goc phai-duoi (135deg) — quang sang
     trang mo la lop diem nhan gan icon/badge, KHONG doi huong chinh. Lop
     dau (vignette den) toi them vung tren-trai — dung vi tri nguoi dung
     khoanh trong anh chup (trum het badge + tieu de, KHONG cham doan van
     ban mo ta hay danh sach check ben duoi). */
  background:
    radial-gradient(70% 55% at 15% 12%, rgba(0, 0, 0, 0.15), transparent 68%),
    radial-gradient(65% 50% at 25% 18%, rgba(255, 255, 255, 0.16), transparent 55%),
    var(--gradient-brand);
  color: #fff;
  overflow: hidden;
}

.auth-visual-badge {
  display: inline-flex;
  align-self: flex-start;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  position: relative;
  z-index: 1;
}

.auth-visual h2 {
  position: relative;
  z-index: 1;
  font-size: 25px;
  line-height: 1.35;
  margin: 0;
  font-weight: 700;
}

.auth-visual p {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.86);
  max-width: 300px;
}

.auth-visual-list {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
  font-size: 13.5px;
  font-weight: 500;
}

.auth-visual-list li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.auth-visual-list .menu-icon {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  padding: 6px;
  width: 26px;
  height: 26px;
}

.auth-panel {
  flex: 1 1 56%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px 44px;
}

.auth-panel .card.login-card {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  max-width: 360px;
}

.auth-mobile-brand {
  display: none;
}

@media (max-width: 760px) {
  .auth-shell {
    display: block;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    max-width: 380px;
  }

  .auth-visual {
    display: none;
  }

  .auth-panel {
    padding: 0;
  }

  .auth-panel .card.login-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
    border-radius: var(--radius-lg);
    padding: 26px 22px;
    max-width: none;
  }

  .auth-mobile-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    margin: 0 0 16px;
    border-radius: var(--radius);
    background: var(--gradient-brand);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    box-shadow: 0 10px 24px -12px rgba(47, 125, 250, 0.55);
  }

  .auth-mobile-brand .brand-mark {
    background: rgba(255, 255, 255, 0.22);
    box-shadow: none;
  }
}

.login-card h1 {
  text-align: center;
  font-size: 20px;
}

.login-subtitle {
  text-align: center;
  margin: 0 0 8px;
}

.center-text {
  text-align: center;
}

.banner {
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

.banner-success {
  background: rgba(15, 157, 104, 0.12);
  color: var(--color-success);
}

.banner-error {
  background: rgba(220, 38, 38, 0.1);
  color: var(--color-danger);
}

.banner-info {
  background: var(--color-primary-soft);
  color: var(--color-primary-hover);
}

.auth-tabs {
  position: relative;
  display: flex;
  margin-bottom: 22px;
  padding: 4px;
  background: var(--color-surface-sunken);
  border-radius: 999px;
}

.auth-tab {
  position: relative;
  z-index: 1;
  flex: 1;
  background: none;
  border: none;
  padding: 9px 0;
  border-radius: 999px;
  font-size: 12.6px;
  font-weight: 540;
  color: var(--color-muted);
  cursor: pointer;
  transition: color 0.2s ease;
}

.auth-tab.is-active {
  color: #fff;
}

/* Truot bang transform (KHONG left) — left la thuoc tinh layout, moi frame
   transition phai ve lai tu dau nen de bi rach vien bo tron o cac may/driver
   yeu; transform chay tren compositor, khong ve lai, luon muot va khong loi. */
.auth-tab-indicator {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  border-radius: 999px;
  background: var(--gradient-button);
  box-shadow: 0 4px 14px -6px rgba(47, 125, 250, 0.6);
  transform: translateX(0);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.auth-tab-indicator[data-mode='register'] {
  transform: translateX(100%);
}

/* Input co icon trai (chi dung cho form dang nhap/dang ky — man hinh chinh,
   uu tien dau tu; cac form phu nhu quen mat khau giu input don gian). */
.input-icon-group {
  position: relative;
}

.input-icon-group .input-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--color-muted);
  pointer-events: none;
}

.input-icon-group input {
  padding-left: 38px;
}

.auth-hint {
  text-align: left;
  font-size: 13px;
  margin: 20px 0 4px;
}

/* Ep 2 form login/register chiem chung 1 o grid, cao bang form cao nhat —
   chuyen tab khong lam khung the/dang ky/dang nhap tro thut co gian. */
.auth-forms {
  display: grid;
}

.auth-forms > form {
  grid-area: 1 / 1;
}

.auth-forms > form.form-inactive {
  visibility: hidden;
  pointer-events: none;
}

/* Xanh dam hon --color-primary 10% (nhan RGB voi 0.9): #2f7dfa -> #2a71e1. */
.auth-hint a {
  color: #2a71e1;
  font-weight: 600;
  text-decoration: none;
}

.auth-hint a:hover {
  text-decoration: underline;
}

/* Dashboard = app-shell that (giong C:\CRV Layout.jsx): sidebar CAO HET
   CHIEU CAO CON LAI cua man hinh, bam sat canh trai — khong phai 1 card
   nam lan trong noi dung. Ben phai la 1 COT NOI DUNG DUY NHAT, tu cuon
   rieng, cac card chuc nang + tai khoan xep chong (dung nhu Dashboard.jsx
   xep StatCard/RecentVideos/SystemInfo chung 1 cot, KHONG tach cot phu). */
.dashboard-layout {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
}

.dashboard-nav {
  flex: 0 0 240px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 28px 16px;
  background: var(--color-surface-sunken);
  border-right: 1px solid var(--color-border);
  overflow-y: auto;
}

.dashboard-nav-title {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
  margin: 0 0 10px;
  padding: 0 10px;
}

.dashboard-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dashboard-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-left: 2px solid transparent;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 9px 12px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-muted);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.dashboard-menu-item .menu-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: inherit;
}

.dashboard-menu-item .menu-icon svg {
  width: 100%;
  height: 100%;
}

.dashboard-menu-item:hover:not(.is-active) {
  background: rgba(23, 23, 31, 0.04);
  color: var(--color-text);
}

.dashboard-menu-item.is-active {
  background: var(--color-primary-soft);
  border-left-color: var(--color-primary);
  color: var(--color-primary-hover);
}

/* Moi NHOM 1 mau rieng khi active — giup nhan dien nhanh dang o khu vuc nao. */
.dashboard-menu-item[data-group='admin'].is-active {
  background: rgba(245, 158, 11, 0.14);
  border-left-color: #f59e0b;
  color: #b45309;
}

.dashboard-menu-item[data-group='support'].is-active {
  background: rgba(13, 148, 136, 0.13);
  border-left-color: #0d9488;
  color: #0f766e;
}

/* KHONG cuon o day nua (truoc kia `overflow-y: auto`): thanh cuon duy nhat
   nam trong .ws-panel-scroll, dung nguyen tac "man hinh co dinh, khung noi
   dung tu cuon" — doi mau/tab khong lam troi vi tri khung xem ben trai. */
.dashboard-content {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 22px 26px 24px;
  display: flex;
  flex-direction: column;
}

/* ── Khung lam viec: tinh nang lon → mo ta → khung xem + khung noi dung ──── */

.workspace {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Hang 1 — tinh nang lon cua nhom dang chon (tab gach chan). Cap 2 (muc nho)
   dung dang vien bo tron o .ws-subtab de hai cap khong nhin giong nhau. */
.ws-featurebar {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  border-bottom: 1px solid var(--color-border);
}

.ws-feature {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.7;
  color: var(--color-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 8px 14px 9px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.ws-feature:hover:not(.is-active) {
  color: var(--color-text);
}

.ws-feature.is-active {
  color: var(--color-primary-hover);
  border-bottom-color: var(--color-primary);
}

.ws-feature-icon {
  display: inline-flex;
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  opacity: 0.75;
}

.ws-feature.is-active .ws-feature-icon {
  opacity: 1;
}

.ws-feature-icon svg {
  width: 100%;
  height: 100%;
}

/* Hang 2 — mo ta ngan cua tinh nang dang chon. Cao co dinh 2 dong de doi tinh
   nang khong lam khung xem ben duoi nhay len xuong. */
/* margin-bottom 24px + gap 12px cua .workspace = 36px tu dong mo ta xuong mep
   tren khung xem (gap 3 lan khoang cu) — de khu vuc lam viec tho hon. */
.ws-desc {
  flex: 0 0 auto;
  margin: 0 0 24px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* `flex: 1 1 0` (co so 0, KHONG phai auto): voi `auto` trinh duyet lay chieu
   cao NOI DUNG lam co so nen khung xem to len lai keo hang cao them — vong
   phan hoi duong, khung phinh dan tran ca man hinh (da gap that). */
.ws-body {
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
  display: flex;
  gap: 18px;
  align-items: stretch;
}

/* Cot trai CO DINH — khung xem 9:16 + player. Chieu rong tu chieu cao con lai
   (fitStage() trong app.js gan px truc tiep), KHONG dung CSS aspect-ratio ket
   hop flex vi trinh duyet uu tien co rut theo flex hon giu ti le → anh bi bep. */
.ws-stage {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 0;
  width: min(100%, 360px);
}

.ws-phone {
  position: relative;
  flex: 0 0 auto;
  background: #05070d;
  border: 3px solid #10192e;
  border-radius: 26px;
  padding: 8px 6px;
  box-shadow: 0 14px 34px rgba(6, 27, 69, 0.22);
}

.ws-phone-notch {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 34%;
  height: 9px;
  border-radius: 0 0 9px 9px;
  background: #10192e;
  z-index: 2;
}

.ws-phone-screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 17px;
  background: #000;
}

/* Moi "slot" la 1 kieu noi dung xem thu (hieu ung / video / anh / CTA / nhac),
   chong len nhau — stageShow() trong app.js chi hien dung 1 cai. */
.ws-slot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  margin: 0;
  display: block;
}

#ws-video,
#ws-image {
  object-fit: contain;
  background: #000;
}

.ws-stage-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 18px;
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.62);
}

.ws-audio-art {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px;
  color: rgba(255, 255, 255, 0.85);
  background: linear-gradient(160deg, #0b1f45, #061b45 60%, #04122e);
}

.ws-audio-art svg {
  width: 42px;
  height: 42px;
  opacity: 0.9;
}

.ws-audio-art p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
  text-align: center;
  word-break: break-word;
}

/* Xem thu bo cuc CTA — chi dung chu + nut de kiem tra do dai, mau that tren
   video do palettes.ts quyet dinh theo cam xuc canh (khong mo phong o day). */
.ws-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 22px 18px;
  text-align: center;
  background: linear-gradient(170deg, #071c46, #0a2a5e);
  color: #fff;
}

.ws-cta-top {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
}

.ws-cta-channel {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
}

.ws-cta-btn {
  display: inline-block;
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--color-primary);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.7;
}

.ws-phone-stand {
  flex: 0 0 auto;
  width: 46px;
  height: 4px;
  margin-top: 8px;
  border-radius: 999px;
  background: var(--color-border);
}

.ws-player {
  flex: 0 0 auto;
  width: 100%;
  margin-top: 10px;
  text-align: center;
}

.ws-player #ws-seek {
  width: 100%;
  margin: 0;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.ws-player #ws-seek:disabled {
  cursor: default;
  opacity: 0.5;
}

.ws-player-btns {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 6px;
}

.ws-player-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: none;
  color: var(--color-navy);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.ws-player-btn svg {
  width: 20px;
  height: 20px;
}

.ws-player-btn:hover:not(:disabled) {
  background: var(--color-primary-soft);
}

.ws-player-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.ws-player-btn-main {
  width: 46px;
  height: 46px;
  border: 2px solid var(--color-navy);
}

.ws-player-btn-main svg {
  width: 24px;
  height: 24px;
}

.ws-stage-caption {
  margin-top: 8px;
  min-height: 46px;
}

.ws-stage-title {
  margin: 0;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.6;
  word-break: break-word;
}

/* Chi dung cho thong bao trang thai/loi — rong thi bien mat han de khoi
   player khong chiem cho (mo ta hieu ung da co tren tung the ben phai). */
.ws-stage-note {
  margin: 2px 0 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--color-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ws-stage-note:empty {
  display: none;
}

/* Nut phu (phat lien tuc, tieng chuyen canh): nho hon 3 nut dieu khien vi khac
   nhom chuc nang — dang BAT thi to mau chinh de nhin la biet dang mo. */
.ws-player-btn-sub {
  width: 30px;
  height: 30px;
  color: var(--color-muted);
}

.ws-player-btn-sub svg {
  width: 17px;
  height: 17px;
}

.ws-player-btn-sub:not(.is-off) {
  color: var(--color-primary);
}

#ws-repeat {
  margin-right: 4px;
}

#ws-sfx {
  margin-left: 4px;
}

/* Khung noi dung ben phai — VIEN bao quanh, hang muc nho ghim tren, phan con
   lai tu cuon. Day la thanh cuon DUY NHAT cua man hinh tren desktop. */
.ws-panel {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg, 14px);
  background: var(--color-surface);
  padding: 14px 16px;
}

.ws-subtabs {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--color-border);
}

.ws-subtabs:empty {
  display: none;
}

.ws-subtab {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.7;
  padding: 7px 14px;
  min-height: 34px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-muted);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ws-subtab:hover:not(.is-active) {
  border-color: var(--color-primary);
  color: var(--color-primary-hover);
}

.ws-subtab.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.ws-panel-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-right: 6px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Card nam TRONG khung da co vien roi — bo do do bong de khong bi "hop long
   hop". Vien duoi day hon (giong the o kho hieu ung) de tung khoi tach bach. */
.ws-panel-scroll .card {
  box-shadow: none;
  border-bottom-width: 3px;
  transition: border-color 0.15s ease;
}

/* Khoi dang chinh: vien navy dam quanh + vien duoi day — nhin la biet dang
   sua o dau, nhat la khi mot man co nhieu khoi cai dat. */
.ws-panel-scroll .card.is-selected {
  border-color: var(--color-navy);
  border-bottom-width: 4px;
}

.dashboard-view {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Khoa cuon CHI khi dang o bang dieu khien (class do app.js gan). Cac man
   dang nhap/dang ky/doi mat khau van cuon binh thuong — neu khoa ca o do thi
   nguoi dung phong to chu (Ctrl +) se khong keo xuong toi nut bam duoc. */
@media (min-width: 901px) {
  body.is-dashboard {
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }
}

@media (max-width: 900px) {
  .dashboard-layout {
    flex-direction: column;
  }

  .dashboard-nav {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    border-right: none;
    border-bottom: 1px solid var(--color-border);
    padding: 12px 14px;
    overflow-x: auto;
  }

  .dashboard-nav-title {
    display: none;
  }

  .dashboard-menu {
    flex-direction: row;
  }

  /* Hang ngang tren mobile PHAI cuon ngang, khong duoc de chu wrap xuong
     dong — thieu 2 dong nay la nut co gian/chu roi xuong dong lam ca hang
     "xoc xech" (da gap thuc te, xem anh chup nguoi dung). */
  .dashboard-menu > li {
    flex: 0 0 auto;
  }

  .dashboard-menu-item {
    width: auto;
    white-space: nowrap;
  }

  .dashboard-content {
    padding: 16px 14px 32px;
  }
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
}

.card h1 {
  font-size: 18px;
  margin: 0 0 4px;
}

.card h2 {
  font-size: 15px;
  margin: 0 0 12px;
}

/* Icon-badge mau truoc tieu de moi khu vuc — giup phan biet nhanh
   job/affiliate/user/goi/hoa hong thay vi moi card nhin giong het nhau. */
.card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}

.card-header h1 {
  margin: 0;
}

#review-title {
  cursor: pointer;
  border-radius: 6px;
  padding: 2px 6px;
  margin: -2px -6px;
  transition: background-color 0.15s ease;
}

#review-title:hover {
  background: var(--color-primary-soft);
}

.review-title-form {
  flex: 1;
  min-width: 0;
}

.review-title-form input {
  width: 100%;
  font-size: 18px;
  font-weight: 700;
  padding: 6px 10px;
}

.card-header-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 12px;
}

.card-header-icon svg {
  width: 19px;
  height: 19px;
}

.card-header-icon.icon-jobs {
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.card-header-icon.icon-affiliate {
  background: rgba(11, 31, 69, 0.08);
  color: var(--color-navy);
}

.card-header-icon.icon-users {
  background: rgba(245, 158, 11, 0.14);
  color: #b45309;
}

.card-header-icon.icon-packages {
  background: rgba(13, 148, 136, 0.13);
  color: #0f766e;
}

.card-header-icon.icon-commission {
  background: rgba(14, 165, 233, 0.13);
  color: var(--color-sky);
}

.muted {
  color: var(--color-muted);
  font-size: 13px;
  margin: 4px 0 16px;
}

form label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin: 12px 0 6px;
}

form input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

form input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(47, 125, 250, 0.15);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: 8.4px;
  border: 1px solid transparent;
  -webkit-appearance: none;
  appearance: none;
  font-size: 12.6px;
  font-weight: 540;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

/* KHONG dat margin o day: `margin-top: 16px` cu lam MOI nut chinh tut xuong
   16px so voi nut phu dung canh no (hang nut nao cung so le). Khoang cach voi
   o nhap phia tren nay do `form > .btn` ben duoi lo — ap dung cho MOI loai nut
   nen cac nut trong cung mot hang luon thang hang. */
.btn-primary {
  background: var(--gradient-button);
  color: #fff;
  /* Bong xanh lan toa + 1 lop bong den sat canh duoi cho nut "noi" hon,
     kieu do sau vat ly thay vi chi phang mau. */
  box-shadow: 0 8px 20px -8px rgba(47, 125, 250, 0.55), 0 3px 6px -1px rgba(0, 0, 0, 0.3);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease, background 0.15s ease;
}

/* Nut (hoac hang nut) nam ngay trong bieu mau: tach khoi o nhap phia tren.
   Ap cho MOI loai nut → nut chinh va nut phu luon cung mot moc doc. */
form > .btn,
form > .cta-template-form-actions {
  margin-top: 16px;
}

.btn-block {
  display: flex;
  width: 100%;
}

.btn-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.03);
  /* Bong den thuan (khong con tinh mau xanh) — tuong phan ro hon voi nut
     da sang len, thay vi bong mau hoa lan vao chinh mau nut. */
  box-shadow: 0 16px 32px -8px rgba(0, 0, 0, 0.45), 0 5px 10px -2px rgba(0, 0, 0, 0.38);
}

.btn-primary:active:not(:disabled) {
  transform: translateY(0);
  filter: brightness(0.96);
}

.btn-primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(47, 125, 250, 0.3);
}

/* KHONG dat padding rieng o day: truoc kia .btn-ghost co padding 6px 12px con
   .btn la 10px 18px, nen nut phu luon thap hon nut chinh dung canh no (nhin
   xoc xech o moi man). Nut nho thi dung them lop .btn-sm. */
.btn-ghost {
  background: transparent;
  border-color: var(--color-border);
  color: var(--color-text);
}

.btn-ghost:hover:not(:disabled) {
  background: var(--color-bg);
  border-color: rgba(47, 125, 250, 0.3);
}

.btn-ghost:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(47, 125, 250, 0.2);
}

/* Nut "Lưu …" — VIEN XANH ro net thay vi vien xam nhat.
 *
 * `.btn-ghost` (vien xam) chim han vao nen trang cua card: nguoi dung phai do
 * mat tim nut Luu. Van giu nen trang chu khong dung `.btn-primary` (nen xanh
 * dac) — trong mot card co the co nhieu nut, de tat ca thanh nut chinh thi lai
 * khong con thu tu uu tien nao. */
.btn-save {
  background: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary);
  font-weight: 600;
}

.btn-save:hover:not(:disabled) {
  background: var(--color-primary-soft);
  border-color: var(--color-primary-hover);
  color: var(--color-primary-hover);
}

.btn-save:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(47, 125, 250, 0.25);
}

/* Da luu xong (nhan doi thanh "Đã lưu ✓") van phai doc duoc khi nut bi khoa. */
.btn-save:disabled {
  border-color: var(--color-border);
  color: var(--color-muted);
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Dat SAU .btn:disabled de thang cascade (cung do dac ta 0,2,0, ai khai bao
   sau thang) — disabled KHONG dung opacity mo dan gradient nua vi nen sang
   bac giua nhat lam chu trang gan nhu bien mat (da gap thuc te: nut "Yeu cau
   rut tien" khi chua du so du). Doi sang nen phang xam trung tinh, doc duoc. */
.btn-primary:disabled {
  background: var(--color-border);
  color: var(--color-muted);
  box-shadow: none;
  opacity: 1;
}

/* Bang "Quan ly user"/"Quan ly goi"/tuyen duoi affiliate — table-scroll cuon
   ngang rieng tung bang, khong lam ca trang cuon ngang tren mobile hep. */
.table-scroll {
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.data-table th,
.data-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

.data-table th {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-muted);
  font-weight: 700;
  background: var(--color-surface-sunken);
}

.data-table th:first-child {
  border-top-left-radius: var(--radius-sm);
}

.data-table th:last-child {
  border-top-right-radius: var(--radius-sm);
}

.data-table tbody tr:hover {
  background: var(--color-bg);
}

.data-table td input[type='text'],
.data-table td input[type='number'] {
  width: 100%;
  min-width: 90px;
  padding: 6px 8px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
}

.affiliate-link-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.affiliate-link-row input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--color-surface-sunken);
  color: var(--color-text);
}

.stat-value {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 32px;
  font-weight: 700;
  color: transparent;
  background: var(--gradient-brand);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.stat-unit {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-muted);
  -webkit-text-fill-color: var(--color-muted);
}

.plain-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--color-muted);
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-muted);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.icon-btn svg {
  width: 18px;
  height: 18px;
}

.icon-btn:hover:not(:disabled) {
  background: var(--color-primary-soft);
  color: var(--color-primary-hover);
}

.icon-btn:active:not(:disabled) {
  transform: scale(0.92);
}

.icon-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(47, 125, 250, 0.2);
}

.icon-btn-danger:hover:not(:disabled) {
  background: rgba(220, 38, 38, 0.1);
  color: var(--color-danger);
}

.icon-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.error-text {
  color: var(--color-danger);
  font-size: 13px;
  margin-top: 12px;
}

.job-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.job-item {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 12px 14px;
}

.job-item-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 13px;
}

.job-type {
  color: var(--color-muted);
  flex: 1;
}

.job-percent {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.job-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: var(--color-queued);
}

.job-badge-queued {
  background: var(--color-queued);
}

.job-badge-running {
  background: var(--color-running);
}

.job-badge-done {
  background: var(--color-done);
}

.job-badge-error {
  background: var(--color-error);
}

/* Nut xoa job — ban thu nho cua .icon-btn (38px qua to cho dong tieu de
   13px cua job-item-head), dat cuoi hang nho .job-type { flex: 1 } day sang phai. */
.job-delete-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-muted);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.job-delete-btn:hover:not(:disabled) {
  background: rgba(220, 38, 38, 0.1);
  color: var(--color-danger);
}

.job-delete-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.progress-track {
  height: 8px;
  background: var(--color-bg);
  border-radius: 999px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--color-running);
  border-radius: 999px;
  transition: width 0.3s ease;
}

.job-item.status-done .progress-fill {
  background: var(--color-done);
}

.job-item.status-error .progress-fill {
  background: var(--color-error);
}

.job-message {
  margin-top: 6px;
  font-size: 12px;
  color: var(--color-muted);
  min-height: 16px;
}

.package-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.package-btn {
  width: 100%;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
}

.package-btn-credits {
  font-weight: 600;
}

.package-btn-price {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-primary-hover);
  background: var(--color-primary-soft);
  padding: 3px 10px;
  border-radius: 999px;
}

@media (max-width: 480px) {
  .container {
    padding: 16px 12px 32px;
  }

  .card {
    padding: 16px;
  }

  .topbar {
    padding: 12px 14px;
  }

  .topbar-brand {
    font-size: 15px;
  }
}

/* ===== Video (V5: danh sach / tao moi / duyet kich ban) =====
   3 khung con cua dashboard-view[data-view="videos"] can tu quan ly khoang
   cach doc — .dashboard-view goc KHONG phai flex container (chi
   .dashboard-content moi co gap, ap dung giua cac .dashboard-view chu khong
   giua cac .card BEN TRONG 1 view — cac view cu nhu "jobs"/"affiliate" dang
   co card sat lien nhau 0px, ngoai pham vi sua o day). */
#video-list-panel,
#video-create-panel,
#video-review-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.card-header-icon.icon-video {
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

/* Cai dat phu de — the nay khong nam trong <form> (khong submit, nut JS rieng)
 * nen khai bao rieng thay vi dua vao "form label"/"form select" o tren. */
.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  margin: 8px 0 4px;
  cursor: pointer;
}

.checkbox-label input[type='checkbox'] {
  width: 18px;
  height: 18px;
  accent-color: var(--color-primary);
  cursor: pointer;
}

/* SO CỘT CO DINH (3), khong dung auto-fit: auto-fit chia theo be rong con lai
   nen them mot o la co the ra 5 o hang tren + 1 o rot xuong hang duoi, nhin
   so le. 3 cot x 2 hang thi 6 o luon deu nhau. */
.caption-settings-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 16px;
  margin: 8px 0 16px;
}

@media (max-width: 1100px) {
  .caption-settings-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .caption-settings-grid {
    grid-template-columns: 1fr;
  }
}

.caption-settings-grid label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-muted);
}

.caption-settings-grid select,
.caption-settings-grid input[type='number'] {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 9px 10px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  background: var(--color-surface);
  color: var(--color-text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.caption-settings-grid select:focus,
.caption-settings-grid input[type='number']:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(47, 125, 250, 0.15);
}

/* KHONG dung `pointer-events: none`: cai dat chi SUA duoc luc du an o trang
   thai "chờ duyệt", nhung XEM TRUOC thi luc nao cung phai duoc — chan het
   chuot la bam vao khoi cung khong hien duoc khung xem nua. Tung o nhap da bi
   `disabled` bang thuoc tinh (renderCaptionSettings/renderBgmSettings/
   renderVoiceSpeedSettings), the la du. */
#caption-settings-card[aria-disabled='true'],
#voice-speed-settings-card[aria-disabled='true'],
#bgm-settings-card[aria-disabled='true'] {
  opacity: 0.6;
}

#bgm-settings-card select {
  display: block;
  width: 100%;
  margin: 6px 0 16px;
  padding: 9px 10px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  background: var(--color-surface);
  color: var(--color-text);
}

#bgm-settings-card input[type='range'] {
  display: block;
  width: 100%;
  margin: 6px 0 16px;
  accent-color: var(--color-primary);
}

#upload-bgm-form input[type='file'] {
  display: block;
  width: 100%;
  margin: 6px 0 16px;
  padding: 9px 10px;
  border: 1px dashed var(--color-border);
  border-radius: 8px;
  font-size: 13px;
  background: var(--color-surface-sunken);
  color: var(--color-text);
}

.media-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.media-item {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 12px 14px;
}

.media-item-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.media-item-name {
  font-weight: 600;
  font-size: 14px;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.media-item-size {
  font-size: 12px;
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}

.media-item audio {
  width: 100%;
  height: 32px;
}

form textarea,
form select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  background: var(--color-surface);
  color: var(--color-text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

form textarea {
  resize: vertical;
  min-height: 90px;
}

form textarea:focus,
form select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(47, 125, 250, 0.15);
}

.video-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}

/* Hang nut tren danh sach video (hien chi co "Xoa tat ca") — luon chiem cho
 * ke ca khi nut an, de luoi the ben duoi khong nhay len xuong khi danh sach
 * chuyen tu rong sang co video. */
/* ── Chinh sua nhac trong kho (doi toc do / am luong) ─────────────────── */

.media-edit-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-bg);
}

.media-edit-box > label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12.5px;
  color: var(--color-muted);
  margin: 0;
}

.media-edit-box input[type='range'] {
  width: 100%;
  margin: 0;
}

/* Hang nut chiem tron be ngang — khong lam lech luoi 2 cot o tren. */
.media-edit-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.media-edit-actions .muted {
  font-size: 11.5px;
}

.media-edit-error {
  grid-column: 1 / -1;
  margin: 0;
}

/* ── Nen video: chon 1 trong 8 tong mau ───────────────────────────────── */

.bg-palette-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
  margin-top: 8px;
}

/* Kich thuoc CO DINH — ten tong dai ngan khac nhau khong duoc lam o so le. */
.bg-palette-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 10px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-surface);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.bg-palette-btn:hover:not(:disabled) {
  border-color: var(--color-primary);
}

.bg-palette-btn.is-selected {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary-soft);
}

.bg-palette-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.bg-palette-swatch {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.15);
}

.bg-palette-name {
  font-size: 12.5px;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Chon nen rieng cho tung canh (trong the canh o man duyet) ────────── */

.scene-bg-picker {
  margin-top: 10px;
}

.scene-bg-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-bg-soft, rgba(47, 125, 250, 0.04));
}

.scene-bg-opt {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12.5px;
  color: var(--color-muted);
}

.scene-bg-opt select,
.scene-bg-opt input[type='range'] {
  width: 100%;
  margin: 0;
}

/* Ghi chu chiem tron hang duoi — khong lam lech luoi 2 cot o tren. */
.scene-bg-note {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 11.5px;
}

/* Khoi AI ve anh nen — GAP LAI mac dinh: day la duong TON TIEN, khong duoc
 * bay ngang hang voi cac tuy chon mien phi o tren. */
.scene-bg-ai {
  margin-top: 8px;
}

.scene-bg-ai > summary {
  cursor: pointer;
  font-size: 12.5px;
  color: var(--color-primary);
  padding: 4px 0;
}

.scene-bg-ai-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.scene-bg-ai-cost {
  font-size: 11.5px;
}

/* ── Kho media: luoi anh/video ────────────────────────────────────────── */

.card-header-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.media-quota {
  font-size: 12px;
  white-space: nowrap;
}

.media-grid {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}

/* Kich thuoc the CO DINH — anh cao thap khac nhau khong duoc keo the so le
 * (cung nguyen tac voi the hieu ung cung 88px). */
.media-tile {
  position: relative;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-surface);
  /* Bam vao the la xem thu o khung ben trai — phai thay ro la bam duoc. */
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.media-tile:hover {
  border-color: var(--color-primary);
}

.media-tile.is-selected {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary-soft);
}

.media-tile-thumb {
  display: block;
  width: 100%;
  height: 110px;
  object-fit: cover;
  background: #0b1220;
}

/* Video khong tai san video that de lam anh dai dien (nang) — dung o mau toi
 * co bieu tuong phat, du de phan biet trong luoi. */
.media-tile-vid {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: rgba(255, 255, 255, 0.7);
}

.media-tile-body {
  padding: 8px 10px 10px;
}

.media-tile-name {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text);
  /* Ten dai phai bi cat, khong duoc lam the cao them. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.media-tile-meta {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--color-muted);
}

.media-tile-delete {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: none;
  background: rgba(6, 27, 69, 0.72);
  color: #fff;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, background-color 0.15s ease;
}

.media-tile:hover .media-tile-delete,
.media-tile-delete:focus-visible {
  opacity: 1;
}

.media-tile-delete:hover:not(:disabled) {
  background: var(--color-danger);
}

.media-tile-delete:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.video-list-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-height: 38px;
  margin-bottom: 10px;
}

.btn-danger {
  color: var(--color-danger);
  border-color: rgba(220, 38, 38, 0.35);
}

.btn-danger:hover:not(:disabled) {
  background: rgba(220, 38, 38, 0.08);
  border-color: var(--color-danger);
  color: var(--color-danger);
}

.video-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.video-card:hover {
  border-color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.video-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.video-card-type {
  font-size: 12px;
  color: var(--color-muted);
}

.video-card-title {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
  /* Cat gon 2 dong — chu de dai khong keo doi card khac hang trong luoi. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.video-card-meta {
  margin: 0;
  font-size: 12px;
  color: var(--color-muted);
}

/* Chan the: ngay cap nhat ben trai, nut xoa ben phai. `min-height` bang chieu
 * cao nut xoa nen the KHONG cao them khi co nut — moi the trong luoi giu dung
 * mot kich thuoc du co nut hay khong (vd the dang san xuat khong cho xoa). */
.video-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 30px;
  margin-top: 6px;
}

/* Nho hon .icon-btn chuan (38px) vi nam trong the — van du 30px vung bam. */
.video-card-delete {
  width: 30px;
  height: 30px;
}

.video-card-delete svg {
  width: 15px;
  height: 15px;
}

.video-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  color: #fff;
  background: var(--color-queued);
}

.video-badge-draft,
.video-badge-generating {
  background: var(--color-running);
}

.video-badge-review {
  background: var(--color-warning);
}

.video-badge-approved,
.video-badge-producing {
  background: var(--color-sky);
}

.video-badge-done {
  background: var(--color-done);
}

.video-badge-error {
  background: var(--color-error);
}

.scene-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Cung mot ngon ngu voi cac khoi cai dat: vien duoi day de tach bach, vien
   navy khi dang chinh (xem `.ws-panel-scroll .card.is-selected`). */
.scene-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-bottom-width: 3px;
  border-radius: var(--radius);
  box-shadow: none;
  padding: 16px;
  transition: border-color 0.15s ease;
}

.scene-card.is-selected {
  border-color: var(--color-navy);
  border-bottom-width: 4px;
}

.scene-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.scene-order {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-navy);
}

.scene-layout-badge {
  font-size: 11.5px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--color-primary-soft);
  color: var(--color-primary-hover);
}

.scene-onscreen {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--color-muted);
}

.scene-onscreen-fields {
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.scene-onscreen-fields .scene-voice-label {
  margin-bottom: 0;
}

.scene-onscreen-row {
  display: flex;
  gap: 10px;
}

.scene-onscreen-row .scene-voice-label {
  flex: 1;
  min-width: 0;
}

.scene-onscreen-input {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 9px 11px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 13.5px;
  font-family: inherit;
  resize: vertical;
}

.scene-onscreen-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(47, 125, 250, 0.15);
}

.scene-voice-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--color-text);
}

/* O chon mau CTA + nut luu mau, dat tren 3 o noi dung cua canh ket. Tren mobile
   (nut xuong dong) can canh trai thay vi flex-end de khong lech khoi cot o nhap. */
.cta-template-picker {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.cta-template-picker .scene-voice-label {
  flex: 1;
  min-width: 180px;
  margin-bottom: 0;
}

.cta-template-picker .scene-cta-template-select {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 9px 11px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 13.5px;
  font-family: inherit;
  background: var(--color-surface);
  color: var(--color-text);
}

.cta-template-picker .scene-cta-template-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(47, 125, 250, 0.15);
}

.cta-template-picker .scene-cta-save-template {
  white-space: nowrap;
}

/* Tren dien thoai nut xuong dong duoi o chon — btn-sm cao 28px la nho cho ngon
   tay, nang vung cham len 36px (chi rieng nut nay, khong dung .btn-sm chung). */
@media (max-width: 760px) {
  .cta-template-picker .scene-cta-save-template {
    min-height: 36px;
  }
}

.cta-template-form-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.cta-template-preview {
  margin: 0;
  font-size: 13px;
  word-break: break-word;
}

.scene-voice-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 13.5px;
  font-family: inherit;
  resize: vertical;
  min-height: 64px;
}

.scene-voice-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(47, 125, 250, 0.15);
}

.scene-effect-select {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 9px 10px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  background: var(--color-surface);
  color: var(--color-text);
}

.scene-effect-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(47, 125, 250, 0.15);
}

/* Hang nut rieng mot dong, dong chu chi phi xuong duoi — truoc kia ca 3 nam
   chung 1 flex-wrap nen nut va chu so le nhau, nhin xoc xech. */
#review-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.review-actions-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* Cung chieu cao du nut dang bat hay bi khoa — nut khoa doi chu ("Đã duyệt")
   ngan hon nen truoc day trong lech han so voi nut ben canh. */
.review-actions-row .btn {
  height: 40px;
  white-space: nowrap;
}

#review-actions .muted {
  margin: 0;
}

@media (max-width: 480px) {
  .video-list {
    grid-template-columns: 1fr;
  }
}

/* O go so co chu — cao bang cac o chon ben canh de hang khong so le. */
.cap-fontsize-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cap-fontsize-row input {
  width: 100%;
  min-width: 0;
}

.cap-unit {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 400;
  color: var(--color-muted);
}

/* Co chu THUC TE dang len hinh — khac so go vao khi cau dai bi thu cho vua
   mot dong. Khong noi ro thi nguoi dung tuong o go so bi hong. */
.cap-fontsize-real {
  display: block;
  margin-top: 4px;
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-muted);
}

.cap-fontsize-real:empty {
  display: none;
}

/* ── Cong cu chinh phu de (phim 4 chieu + thanh truot + bang mau) ─────── */

.cap-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-start;
  margin-top: 16px;
}

.cap-tool-label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-muted);
  margin-bottom: 8px;
}

.cap-dpad-block {
  flex: 0 0 auto;
}

/* Luoi 3x3: hang tren chi co nut LEN (o giua), hang giua trai/ve-giua/phai,
   hang duoi chi co nut XUONG — dat dung o giua bang grid-column. */
.cap-dpad {
  display: grid;
  grid-template-columns: repeat(3, 34px);
  grid-template-rows: repeat(3, 34px);
  gap: 4px;
}

.cap-dpad-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-size: 12px;
  line-height: 1;
  border: 1.5px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  color: var(--color-navy);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.cap-dpad-btn:hover:not(:disabled) {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.cap-dpad-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.cap-dpad-btn[data-nudge='up'] {
  grid-column: 2;
  grid-row: 1;
}

.cap-dpad-btn[data-nudge='left'] {
  grid-column: 1;
  grid-row: 2;
}

.cap-dpad-btn[data-nudge='reset'] {
  grid-column: 2;
  grid-row: 2;
}

.cap-dpad-btn[data-nudge='right'] {
  grid-column: 3;
  grid-row: 2;
}

.cap-dpad-btn[data-nudge='down'] {
  grid-column: 2;
  grid-row: 3;
}

.cap-dpad-value {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--color-muted);
}

.cap-tool-fields {
  flex: 1 1 260px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cap-tool-fields label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-muted);
}

.cap-tool-fields input[type='range'] {
  width: 100%;
  margin-top: 6px;
  accent-color: var(--color-primary);
}

.cap-color-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* O mau dat tren nen TOI dung bang nen phu de trong video — nhin dung mau
   that se len hinh, khong phai mau tren nen trang cua trang web. */
.cap-color-btn {
  width: 30px;
  height: 30px;
  padding: 3px;
  border: 2px solid transparent;
  border-radius: 999px;
  background: #060a12;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.cap-color-btn span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 999px;
}

.cap-color-btn:hover {
  transform: scale(1.08);
}

.cap-color-btn.is-active {
  border-color: var(--color-primary);
}

.cap-color-btn:disabled {
  opacity: 0.45;
  cursor: default;
  transform: none;
}

/* ── Man "Mau hieu ung" ───────────────────────────────────────────────── */

.effects-preview-item-group {
  margin-bottom: 16px;
}

.effects-preview-item-group h3 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.7;
  color: var(--color-muted);
  margin: 0 0 8px;
}

/* DUNG 4 the/hang (khong dung auto-fill): the hep thi ten hieu ung bi ngat
   giua chung, ghi chu xuong 4-5 dong, doc met. Duoi 1100px giam dan con 3/2/1
   de khong bop chu. */
.effects-preview-item-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 1400px) {
  .effects-preview-item-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1000px) {
  .effects-preview-item-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .effects-preview-item-grid {
    grid-template-columns: 1fr;
  }
}

/* Vien 1.5px + vien duoi day hon (bong nhe) de tung the tach bach voi the ben
   canh. Chieu cao CO DINH (ten 1 dong + ghi chu 2 dong) — cac the bang nhau
   du ten dai ngan khac nhau; phan tran cat "..." va hien day du khi ro chuot
   (thuoc tinh title). */
/* Chieu cao CO DINH bang px (khong phai min-height): moi the giong het nhau du
   ten/ghi chu dai ngan the nao — noi dung dai bi cat "..." chu KHONG duoc lam
   the cao them. Doi chieu cao thi doi dung o day. */
.effects-preview-item {
  display: flex;
  flex-direction: column;
  height: 88px;
  overflow: hidden;
  font: inherit;
  font-weight: 600;
  text-align: left;
  padding: 11px 14px 12px;
  line-height: 1.45;
  border-radius: 10px;
  border: 1.5px solid var(--color-border);
  border-bottom-width: 3px;
  background: var(--color-surface);
  color: var(--color-navy);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.effects-preview-item-name {
  display: block;
  flex: 0 0 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.effects-preview-item:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.effects-preview-item.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.effects-preview-item small {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1 1 auto;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--color-muted);
  margin-top: 4px;
}

.effects-preview-item:hover small,
.effects-preview-item.is-active small {
  color: inherit;
  opacity: 0.85;
}

/* The bao ngoai 1 hieu ung/chuyen canh/camera — nut PHAT (.effects-preview-item)
 * va nut Xoa/Khoi phuc la 2 phan tu CANH NHAU (khong long button trong button,
 * vi HTML khong cho phep va se hong hanh vi click). */
/* `align-self: start` de o luoi khong keo cao the theo hang — the giu dung
   chieu cao co dinh cua .effects-preview-item + hang nut ben duoi. */
.effects-preview-item-card {
  display: flex;
  flex-direction: column;
  align-self: start;
  gap: 4px;
}

/* The da xoa chi xuat hien o muc nho "Đã xóa" — vien dut de phan biet ngay
   voi hieu ung dang dung, khong lam mo chu (ca tab deu la the da xoa, lam mo
   het thi kho doc). */
.effects-preview-item-card.is-banned .effects-preview-item {
  border-style: dashed;
}

.effects-preview-item-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 0 2px;
}

.effects-preview-ban-btn {
  font: inherit;
  font-size: 11px;
  padding: 4px 9px;
  min-height: 26px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-muted);
  cursor: pointer;
  margin-left: auto;
}

.effects-preview-ban-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.effects-preview-item-card.is-banned .effects-preview-ban-btn {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* Duoi 900px, .dashboard-layout da xep sidebar+noi dung CHONG DOC (thay vi
 * canh nhau) nen ca trang tu cuon binh thuong — bo cuon rieng cua khung noi
 * dung, khung xem xep TREN danh sach: nested-scroll tren dien thoai kho dung
 * hon cuon trang thang. */
@media (max-width: 900px) {
  .dashboard-content {
    overflow-y: auto;
    padding: 16px 14px 28px;
  }

  .ws-body {
    flex-direction: column;
    gap: 14px;
  }

  .ws-stage {
    width: 100%;
    max-width: 260px;
    margin: 0 auto;
  }

  .ws-panel {
    padding: 12px;
  }

  .ws-panel-scroll {
    overflow-y: visible;
    padding-right: 0;
  }

  .ws-desc {
    -webkit-line-clamp: 4;
  }
}