/* Affiliate / CTV dashboard (GĐ3). Dùng design token của theme (tokens.css). */

/* ===== App-shell standalone (page-cong-tac-vien.php / page-dang-ky-ctv.php) =====
   Trang CTV bỏ header/footer/menu site → chỉ thanh app + nội dung, giống app khi cài PWA. */
.ctv-app {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--color-bg, #f2f3f0);
}
.ctv-app-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--color-promo-bg, #1a253d);
  color: #fff;
  padding: 12px 16px;
  padding-top: calc(12px + env(safe-area-inset-top));
  position: sticky;
  top: 0;
  z-index: 10;
}
.ctv-app-brand { font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.ctv-app-brand b { color: #ff7a18; }
.ctv-app-out { color: #cdd6e6; text-decoration: none; font-size: 13px; font-weight: 600; }
.ctv-app-out:hover { color: #fff; }
.ctv-app-actions { display: flex; align-items: center; gap: 14px; }
.ctv-app-refresh {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0;
  background: rgba(255,255,255,.12); border: 0; border-radius: 999px;
  color: #fff; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background .15s;
}
.ctv-app-refresh:hover { background: rgba(255,255,255,.22); }
.ctv-app-refresh:active { transform: scale(.92); }
.ctv-app-refresh svg { width: 19px; height: 19px; }
.ctv-app-main { flex: 1 0 auto; width: 100%; padding: 20px 16px 32px; }
.ctv-app-foot { padding: 16px; text-align: center; font-size: 12px; color: var(--color-muted, #6f7268); }

.denna-ctv-dash {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.denna-ctv-dash .ctv-info {
  color: var(--color-muted, #6f7268);
  margin: 0;
}

/* Màn chào / gate căn giữa (chưa đăng nhập · chưa là CTV · chờ duyệt · khoá) */
.denna-ctv-dash .ctv-welcome {
  min-height: calc(100vh - 160px);
  min-height: calc(100dvh - 160px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 0;
}
.denna-ctv-dash .ctv-welcome-inner { width: 100%; max-width: 360px; margin: 0 auto; text-align: center; }
.denna-ctv-dash .ctv-welcome-icon {
  width: 76px; height: 76px; margin: 0 auto 20px;
  border-radius: 999px; display: grid; place-items: center;
  background: var(--color-accent-soft, #d8e0ed); color: var(--color-accent-action, #1e3a6b);
}
.denna-ctv-dash .ctv-welcome-icon svg { width: 38px; height: 38px; }
.denna-ctv-dash .ctv-welcome-title { margin: 0 0 10px; font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: var(--color-ink, #2b2b2b); }
.denna-ctv-dash .ctv-welcome-lede { margin: 0 0 26px; color: var(--color-muted, #6f7268); line-height: 1.6; }
.denna-ctv-dash .ctv-welcome-lede strong { color: #ff7a18; }
.denna-ctv-dash .ctv-welcome-actions { display: flex; flex-direction: column; gap: 12px; }
.denna-ctv-dash .ctv-welcome-actions .ctv-btn { width: 100%; padding: 13px; font-size: 15px; text-align: center; }

.denna-ctv-dash .ctv-notice {
  padding: 12px 16px;
  border-radius: 10px;
  margin: 0;
  font-size: 15px;
}
.denna-ctv-dash .ctv-notice--ok { background: #d6efe1; color: #178a54; }
.denna-ctv-dash .ctv-notice--err { background: #fde0e2; color: #d83b45; }

.denna-ctv-dash .ctv-head h2 { margin: 0 0 6px; font-size: 22px; font-weight: 800; }
.denna-ctv-dash .ctv-chip {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 11px;
  border-radius: 999px;
  margin-right: 6px;
}
.denna-ctv-dash .ctv-chip--code { background: var(--color-accent-soft, #d8e0ed); color: var(--color-accent-action, #1e3a6b); }
.denna-ctv-dash .ctv-chip--on { background: #d6efe1; color: #178a54; }

.denna-ctv-dash .ctv-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.denna-ctv-dash .ctv-tile {
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-line, #dee0d7);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.denna-ctv-dash .ctv-tile .t-label { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--color-muted, #6f7268); }
.denna-ctv-dash .ctv-tile .t-num { font-size: 22px; font-weight: 800; }
.denna-ctv-dash .ctv-tile--hero { background: var(--color-accent-action, #1e3a6b); border-color: transparent; }
.denna-ctv-dash .ctv-tile--hero .t-label { color: #b9c6df; }
.denna-ctv-dash .ctv-tile--hero .t-num { color: #fff; }
.denna-ctv-dash .ctv-tile--warn .t-num { color: #b1740c; }
.denna-ctv-dash .ctv-tile--good .t-num { color: #178a54; }

.denna-ctv-dash .ctv-card {
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-line, #dee0d7);
  border-radius: 14px;
  padding: 18px 20px;
}
.denna-ctv-dash .ctv-card h3 { margin: 0 0 12px; font-size: 16px; font-weight: 700; }

/* Banner ảnh chương trình CTV — đầu tab Tổng quan (dưới menu).
   Ảnh nét cao 1400×574 (tỉ lệ 2.44:1) → fill full-width, downscale nên nét mọi màn. */
.denna-ctv-dash .ctv-promo-img img {
  display: block; width: 100%; height: auto;
  border-radius: 14px;
}
/* Khi banner đứng ngay trước màn chào/login (chưa đăng nhập) → bỏ chiều cao
   full-viewport để nội dung nằm sát banner, không để khoảng trống lớn ở trên. */
.denna-ctv-dash .ctv-promo-img + .ctv-welcome { min-height: auto; padding-top: 10px; }
.denna-ctv-dash .ctv-promo-img + .ctv-login-wrap { margin-top: 26px; }

.denna-ctv-dash .ctv-linktool { display: flex; flex-direction: column; gap: 10px; }
.denna-ctv-dash select {
  padding: 10px 12px;
  border: 1px solid var(--color-line, #dee0d7);
  border-radius: 10px;
  font: inherit;
  background: var(--color-surface, #fff);
  color: var(--color-ink, #2b2b2b);
  max-width: 380px;
}
.denna-ctv-dash .ctv-reflink {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--color-bg-soft, #e7e9e2);
  border: 1px dashed var(--color-line, #dee0d7);
  border-radius: 10px;
  padding: 10px 12px;
  flex-wrap: wrap;
}
.denna-ctv-dash .ctv-reflink code {
  flex: 1 1 200px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 13px;
  color: var(--color-accent-action, #1e3a6b);
  word-break: break-all;
}
.denna-ctv-dash .ctv-hint { font-size: 13px; color: var(--color-muted, #6f7268); margin: 10px 0 0; }

.denna-ctv-dash .ctv-btn {
  display: inline-block;
  text-decoration: none;
  border: none;
  border-radius: 999px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  padding: 10px 20px;
}
.denna-ctv-dash .ctv-btn--primary { background: #ff7a18; color: #fff; }
.denna-ctv-dash .ctv-btn--ghost {
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-line, #dee0d7);
  color: var(--color-ink, #2b2b2b);
  padding: 7px 14px;
  font-size: 13px;
}

/* Rút tiền: dòng ngân hàng + ô nhập mã OTP */
.denna-ctv-dash .ctv-bankline {
  margin: 0 0 12px; padding: 10px 13px; font-size: 14px;
  background: var(--color-bg, #f2f3f0); border-radius: 10px; color: var(--color-ink, #2b2b2b);
}
.denna-ctv-dash .ctv-otp-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.denna-ctv-dash .ctv-otp-input {
  flex: 1 1 150px; min-width: 0; padding: 12px 14px;
  border: 1px solid var(--color-line, #dee0d7); border-radius: 10px;
  font: inherit; font-size: 18px; letter-spacing: 6px; text-align: center;
  background: var(--color-surface, #fff); color: var(--color-ink, #2b2b2b);
}
.denna-ctv-dash .ctv-otp-input:focus { outline: 2px solid var(--color-accent-action, #1e3a6b); outline-offset: 1px; border-color: transparent; }
.denna-ctv-dash .ctv-otp-resend { margin: 10px 0 0; }
.denna-ctv-dash .ctv-otp-timer { margin: 8px 0 0; font-size: 13px; color: var(--color-muted, #6f7268); }
.denna-ctv-dash .ctv-otp-timer--exp { color: #d83b45; font-weight: 700; }
.denna-ctv-dash .ctv-otp-input:disabled { background: var(--color-bg-soft, #e7e9e2); color: var(--color-muted, #6f7268); }
.denna-ctv-dash .ctv-btn:disabled { opacity: .5; cursor: not-allowed; }
.denna-ctv-dash .ctv-linkbtn {
  background: none; border: 0; padding: 0; font: inherit; font-weight: 700;
  color: var(--color-accent-action, #1e3a6b); cursor: pointer; text-decoration: underline;
}

.denna-ctv-dash .ctv-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.denna-ctv-dash .ctv-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 13px;
  background: var(--color-bg, #f2f3f0);
  border-radius: 10px;
}
.denna-ctv-dash .l-name { font-size: 14px; font-weight: 600; }
.denna-ctv-dash .l-name small { color: var(--color-muted, #6f7268); font-weight: 400; }
.denna-ctv-dash .l-right { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.denna-ctv-dash .l-amt { font-weight: 800; }

.denna-ctv-dash .ctv-badge { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.denna-ctv-dash .ctv-badge--warn { background: #f8ebc9; color: #b1740c; }
.denna-ctv-dash .ctv-badge--good { background: #d6efe1; color: #178a54; }
.denna-ctv-dash .ctv-badge--navy { background: var(--color-accent-soft, #d8e0ed); color: var(--color-accent-action, #1e3a6b); }
.denna-ctv-dash .ctv-badge--bad { background: #fde0e2; color: #d83b45; }

/* Thẻ mời cài PWA CTV (ẩn mặc định, JS bật khi cài được) */
.denna-ctv-dash .ctv-install {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: var(--color-accent-soft, #d8e0ed);
  border: 1px solid var(--color-line, #dee0d7);
  border-radius: 14px;
  padding: 13px 16px;
}
.denna-ctv-dash .ctv-install[hidden] { display: none; } /* thắng display:flex ở trên khi ẩn */
.denna-ctv-dash .ctv-install-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.denna-ctv-dash .ctv-install-txt strong { font-size: 15px; color: var(--color-accent-action, #1e3a6b); }
.denna-ctv-dash .ctv-install-txt span { font-size: 13px; color: var(--color-muted, #6f7268); }
.denna-ctv-dash .ctv-install .ctv-btn { flex: 0 0 auto; white-space: nowrap; }
.denna-ctv-dash .ctv-install-ios {
  font-size: 13px; line-height: 1.5; color: var(--color-muted, #6f7268);
  background: var(--color-bg, #f2f3f0); border-radius: 10px; padding: 12px 14px; margin: 0;
}

@media (max-width: 560px) {
  .denna-ctv-dash .ctv-tiles { grid-template-columns: 1fr; }
  .denna-ctv-dash .ctv-install { flex-direction: column; align-items: stretch; }
  .denna-ctv-dash .ctv-install .ctv-btn { width: 100%; }
}

/* ---- Trang đăng ký CTV ---- */
.denna-ctv-register { max-width: 520px; margin: 0 auto; }
.denna-ctv-register .ctv-reg-card {
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-line, #dee0d7);
  border-radius: 16px;
  padding: 28px clamp(20px, 5vw, 32px);
  box-shadow: 0 14px 40px rgba(20, 28, 45, .06);
}
.denna-ctv-register .ctv-reg-title { margin: 0 0 6px; font-size: 23px; font-weight: 800; letter-spacing: -.02em; }
.denna-ctv-register .ctv-reg-lede { margin: 0 0 20px; color: var(--color-muted, #6f7268); }
.denna-ctv-register .ctv-reg-lede strong { color: #ff7a18; }
.denna-ctv-register .ctv-reg-form { display: flex; flex-direction: column; gap: 14px; }
.denna-ctv-register .ctv-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.denna-ctv-register .ctv-field { display: flex; flex-direction: column; gap: 6px; }
.denna-ctv-register .ctv-field label { font-size: 13px; font-weight: 700; color: var(--color-ink, #2b2b2b); }
.denna-ctv-register .ctv-field label small { font-weight: 400; color: var(--color-muted, #6f7268); }
.denna-ctv-register .ctv-field input {
  width: 100%;
  padding: 12px 13px;
  border: 1px solid var(--color-line, #dee0d7);
  border-radius: 10px;
  font: inherit;
  background: var(--color-surface, #fff);
  color: var(--color-ink, #2b2b2b);
}
.denna-ctv-register .ctv-field input:focus {
  outline: 2px solid var(--color-accent-action, #1e3a6b);
  outline-offset: 1px;
  border-color: transparent;
}
.denna-ctv-register .ctv-btn {
  display: inline-block; text-decoration: none; text-align: center;
  border: none; border-radius: 999px; font: inherit; font-weight: 700; cursor: pointer; padding: 10px 20px;
}
.denna-ctv-register .ctv-btn--primary { background: #ff7a18; color: #fff; transition: filter .15s; }
.denna-ctv-register .ctv-btn--primary:hover { filter: brightness(1.06); }
.denna-ctv-register .ctv-btn--block { width: 100%; margin-top: 4px; padding: 13px; font-size: 15px; }

/* Ô cam kết truyền thông (bắt buộc) — checkbox trái, chữ xuống dòng bên phải */
.denna-ctv-register .ctv-commit {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-muted, #6f7268);
  cursor: pointer;
}
.denna-ctv-register .ctv-commit input {
  width: 18px; height: 18px;
  margin: 1px 0 0;
  flex: 0 0 auto;
  accent-color: #ff7a18;
}
.denna-ctv-register .ctv-commit strong { color: var(--color-ink, #2b2b2b); }

/* Thẻ trạng thái (đăng ký thành công / thông tin) — thay cho form */
.denna-ctv-register .ctv-reg-card--done { text-align: center; }
.denna-ctv-register .ctv-done-icon {
  width: 66px; height: 66px; margin: 2px auto 16px;
  border-radius: 999px; display: grid; place-items: center;
  background: #d6efe1; color: #178a54;
}
.denna-ctv-register .ctv-done-icon svg { width: 32px; height: 32px; }
.denna-ctv-register .ctv-done-icon--info { background: var(--color-accent-soft, #d8e0ed); color: var(--color-accent-action, #1e3a6b); }
.denna-ctv-register .ctv-done-msg { color: var(--color-muted, #6f7268); margin: 0 0 18px; line-height: 1.6; }
.denna-ctv-register .ctv-done-msg strong { color: var(--color-ink, #2b2b2b); }
.denna-ctv-register .ctv-done-steps {
  text-align: left; list-style: decimal outside; /* base.css reset ol -> none, bật lại số */
  margin: 0 0 22px; padding: 15px 18px 15px 40px;
  background: var(--color-bg, #f2f3f0); border-radius: 12px;
  color: var(--color-ink, #2b2b2b); line-height: 1.5;
}
.denna-ctv-register .ctv-done-steps li { margin-bottom: 6px; }
.denna-ctv-register .ctv-done-steps li:last-child { margin-bottom: 0; }
.denna-ctv-register .ctv-reg-note { margin: 2px 0 0; font-size: 13px; color: var(--color-muted, #6f7268); text-align: center; }
.denna-ctv-register .ctv-reg-alt { text-align: center; margin: 16px 0 0; font-size: 14px; color: var(--color-muted, #6f7268); }
.denna-ctv-register .ctv-reg-alt a { font-weight: 700; color: var(--color-accent-action, #1e3a6b); text-decoration: none; }
.denna-ctv-register .ctv-info { color: var(--color-muted, #6f7268); margin: 0; }
.denna-ctv-register .ctv-hp { position: absolute; left: -9999px; }
.denna-ctv-register .ctv-notice { padding: 12px 16px; border-radius: 10px; margin: 0 0 16px; font-size: 15px; }
.denna-ctv-register .ctv-notice--pending { background: #d6efe1; color: #178a54; }
.denna-ctv-register .ctv-notice--exists,
.denna-ctv-register .ctv-notice--error { background: #fde0e2; color: #d83b45; }

/* ---- Menu tab trong app CTV (Tổng quan / Tài khoản / Quy định) ---- */
.denna-ctv-dash .ctv-menu {
  display: flex; gap: 4px;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-line, #dee0d7);
  border-radius: 999px;
  padding: 4px; margin-bottom: 16px;
}
.denna-ctv-dash .ctv-menu-item {
  flex: 1; text-align: center; white-space: nowrap;
  padding: 9px 8px; border-radius: 999px;
  font-size: 14px; font-weight: 600; text-decoration: none;
  color: var(--color-muted, #6f7268);
  transition: background .2s, color .2s;
}
.denna-ctv-dash .ctv-menu-item.is-active { background: var(--color-accent-action, #1e3a6b); color: #fff; }
.denna-ctv-dash .ctv-menu-item:not(.is-active):active { background: var(--color-accent-soft, #d8e0ed); }

/* ---- Form hồ sơ trong dashboard (mirror form đăng ký) ---- */
.denna-ctv-dash .ctv-reg-form { display: flex; flex-direction: column; gap: 14px; }
.denna-ctv-dash .ctv-grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.denna-ctv-dash .ctv-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.denna-ctv-dash .ctv-field label { font-size: 13px; font-weight: 700; color: var(--color-ink, #2b2b2b); }
.denna-ctv-dash .ctv-field label small { font-weight: 400; color: var(--color-muted, #6f7268); }
.denna-ctv-dash .ctv-field input {
  width: 100%; min-width: 0; padding: 12px 13px;
  border: 1px solid var(--color-line, #dee0d7); border-radius: 10px;
  font: inherit; background: var(--color-surface, #fff); color: var(--color-ink, #2b2b2b);
}
.denna-ctv-dash .ctv-field input:focus {
  outline: 2px solid var(--color-accent-action, #1e3a6b); outline-offset: 1px; border-color: transparent;
}
.denna-ctv-dash .ctv-btn--block { width: 100%; margin-top: 4px; padding: 13px; font-size: 15px; }
.denna-ctv-dash .ctv-form-sep {
  margin: 20px 0 4px; padding-top: 16px;
  border-top: 1px solid var(--color-line, #dee0d7);
  font-size: 15px; font-weight: 700; color: var(--color-ink, #2b2b2b);
}
.denna-ctv-dash .ctv-form-sep small { font-weight: 400; color: var(--color-muted, #6f7268); }

/* ---- Nội dung tab Quy định ---- */
.denna-ctv-dash .ctv-rules h3 { margin: 0 0 12px; }
.denna-ctv-dash .ctv-rules h4 { font-size: 15px; font-weight: 700; margin: 16px 0 6px; color: var(--color-ink, #2b2b2b); }
.denna-ctv-dash .ctv-rules p { font-size: 14px; line-height: 1.6; margin: 0 0 10px; color: var(--color-ink, #2b2b2b); }
.denna-ctv-dash .ctv-rules ul { margin: 0 0 8px; padding-left: 20px; }
.denna-ctv-dash .ctv-rules li { margin-bottom: 6px; font-size: 14px; line-height: 1.6; color: var(--color-ink, #2b2b2b); }

@media (max-width: 480px) {
  .denna-ctv-dash .ctv-grid2 { grid-template-columns: 1fr; }
}

/* ---- Màn đăng nhập CTV standalone (?ctv_login=1) ---- */
/* width:100% BẮT BUỘC: .denna-ctv-dash là flex column → item có max-width + margin:auto
   (cross-axis) sẽ lấy đúng max-width kể cả khi màn hẹp hơn → tràn ngang trên điện thoại. */
.denna-ctv-dash .ctv-login-wrap { width: 100%; max-width: 460px; margin: 40px auto; }
.denna-ctv-dash .ctv-login-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; margin: -2px 0 2px; }
.denna-ctv-dash .ctv-login-row a { color: var(--color-accent-action, #1e3a6b); text-decoration: none; font-weight: 600; }
.denna-ctv-dash .ctv-remember { display: flex; align-items: center; gap: 7px; color: var(--color-muted, #6f7268); cursor: pointer; }
.denna-ctv-dash .ctv-remember input { width: 16px; height: 16px; accent-color: #ff7a18; }
.denna-ctv-dash .ctv-login-alt { text-align: center; margin: 14px 0 0; font-size: 14px; color: var(--color-muted, #6f7268); }
.denna-ctv-dash .ctv-login-alt a { font-weight: 700; color: var(--color-accent-action, #1e3a6b); text-decoration: none; }

/* Phóng to màn đăng nhập CTV cho dễ thao tác (v1.9.269) — chỉ scope trong login,
   không đụng card dashboard. (max-width/width đặt ở rule .ctv-login-wrap phía trên.) */
.denna-ctv-dash .ctv-login-wrap .ctv-card { padding: 32px clamp(22px, 6vw, 34px); border-radius: 18px; }
.denna-ctv-dash .ctv-login-wrap .ctv-card h3 { font-size: 23px; letter-spacing: -.02em; margin: 0 0 20px; }
.denna-ctv-dash .ctv-login-wrap .ctv-reg-form { gap: 17px; }
.denna-ctv-dash .ctv-login-wrap .ctv-field label { font-size: 14px; }
.denna-ctv-dash .ctv-login-wrap .ctv-field input { padding: 14px 16px; font-size: 16px; border-radius: 12px; }
.denna-ctv-dash .ctv-login-wrap .ctv-login-row { font-size: 15px; }
.denna-ctv-dash .ctv-login-wrap .ctv-remember input { width: 18px; height: 18px; }
.denna-ctv-dash .ctv-login-wrap .ctv-btn--block { padding: 15px; font-size: 16px; margin-top: 6px; }
.denna-ctv-dash .ctv-login-wrap .ctv-login-alt { font-size: 15px; margin-top: 18px; }

@media (max-width: 480px) {
  .denna-ctv-register .ctv-grid2 { grid-template-columns: 1fr; }
}