/* ============================================================
   BOTVIET CONTENT FLUID + TIKTOK REFERENCE V8
   - /app/content dùng Fluid Layout
   - Facebook / TikTok Shop / Shopee giữ composer hiện tại
   - Riêng TikTok dùng 1 khung full-width giống ảnh tham chiếu
   ============================================================ */

html.bv-content-v8-html,
body.bv-content-v8 {
  overflow-x: hidden !important;
}

/* ---------- 1. MAIN PAGE: FLUID ---------- */

body.bv-content-v8 #page-body,
body.bv-content-v8 #page-body .content-v140,
body.bv-content-v8 .bv-v8-content-root {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

body.bv-content-v8 #page-body {
  flex: 1 1 auto !important;
  justify-self: stretch !important;
}

body.bv-content-v8 #page-body .content-v140,
body.bv-content-v8 .bv-v8-content-root {
  margin-inline: 0 !important;
  padding-inline: clamp(.75rem, 1vw, 1.125rem) !important;
}

/* Fallback chỉ bật khi source thật vẫn để lại khoảng trống lớn bên phải. */
body.bv-content-v8 .bv-v8-content-root.bv-v8-viewport-fallback {
  width: var(--bv-v8-fluid-width) !important;
  max-width: var(--bv-v8-fluid-width) !important;
}

/* Chỉ mở clipping trên ancestor của chính vùng content. Không sửa grid/flex của app shell. */
body.bv-content-v8 .bv-v8-unclip {
  overflow-x: visible !important;
  max-width: none !important;
}

/* Các section/top card/table trực tiếp không được giữ max-width cũ. */
body.bv-content-v8 .bv-v8-fluid-section {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* ---------- 2. WORKSPACE CHUNG: 55 / 45 ---------- */

body.bv-content-v8 .bv-v8-workspace {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;

  display: grid !important;
  grid-template-columns:
    minmax(0, 1.15fr)
    minmax(20rem, .85fr) !important;

  gap: clamp(.75rem, 1vw, 1rem) !important;
  align-items: stretch !important;
  box-sizing: border-box !important;
}

body.bv-content-v8 .bv-v8-composer,
body.bv-content-v8 .bv-v8-preview {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* Laptop nhỏ: vẫn 2 cột nhưng không bó nội dung. */
@media (max-width: 74rem) {
  body.bv-content-v8 .bv-v8-workspace {
    grid-template-columns:
      minmax(0, 1.25fr)
      minmax(18rem, .75fr) !important;
  }
}

/* Hẹp hơn mới xếp dọc. */
@media (max-width: 62rem) {
  body.bv-content-v8 .bv-v8-workspace {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* ---------- 3. RIÊNG TIKTOK: GIỐNG ẢNH THAM CHIẾU ---------- */

/*
 * Ảnh tham chiếu TikTok là một khung lớn duy nhất.
 * Vì vậy khi TikTok active:
 * - panel composer chiếm toàn bộ hàng
 * - panel "Xem trước trực tiếp" ngoài bị ẩn
 * - các tab Facebook/TikTok/TikTok Shop/Shopee phía trên vẫn còn để chuyển kênh
 */
body.bv-content-v8.bv-tiktok-v8 .bv-v8-workspace {
  grid-template-columns: minmax(0, 1fr) !important;
}

body.bv-content-v8.bv-tiktok-v8 .bv-v8-composer {
  grid-column: 1 / -1 !important;
  width: 100% !important;
}

body.bv-content-v8.bv-tiktok-v8 .bv-v8-preview {
  display: none !important;
}

/* Form native vẫn tồn tại để toàn bộ JS/backend cũ hoạt động. */
body.bv-content-v8.bv-tiktok-v8 #real-publish-form {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}

/* ---------- 4. TIKTOK STUDIO: KHUNG CHUẨN ---------- */

body.bv-content-v8.bv-tiktok-v8 #botviet-tiktok-studio-v7 {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: .875rem 0 0 !important;

  container-type: inline-size;
  container-name: bv-tiktok-studio;
}

body.bv-content-v8.bv-tiktok-v8 #botviet-tiktok-studio-v7 .tt7-shell {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;

  padding: clamp(.875rem, 1.35vw, 1.375rem) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* Header TikTok */
body.bv-content-v8.bv-tiktok-v8 #botviet-tiktok-studio-v7 .tt7-head {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  flex-wrap: wrap !important;
}

body.bv-content-v8.bv-tiktok-v8 #botviet-tiktok-studio-v7 .tt7-brand,
body.bv-content-v8.bv-tiktok-v8 #botviet-tiktok-studio-v7 .tt7-title,
body.bv-content-v8.bv-tiktok-v8 #botviet-tiktok-studio-v7 .tt7-head-actions {
  min-width: 0 !important;
}

body.bv-content-v8.bv-tiktok-v8 #botviet-tiktok-studio-v7 .tt7-head-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: .625rem !important;
  flex-wrap: wrap !important;
}

/* Hai cột chính giống ảnh: Media / Nội dung đăng */
body.bv-content-v8.bv-tiktok-v8 #botviet-tiktok-studio-v7 .tt7-grid {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;

  display: grid !important;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1.08fr) !important;

  gap: clamp(.875rem, 1.3vw, 1.375rem) !important;
  align-items: stretch !important;
}

/* Container query: dựa vào chiều rộng khung TikTok thật, không dựa vào viewport. */
@container bv-tiktok-studio (max-width: 58rem) {
  body.bv-content-v8.bv-tiktok-v8 #botviet-tiktok-studio-v7 .tt7-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Fallback cho browser không hỗ trợ container query. */
@media (max-width: 68rem) {
  body.bv-content-v8.bv-tiktok-v8 #botviet-tiktok-studio-v7 .tt7-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* ---------- 5. CARD / TEXT / FORM: KHÔNG VỠ ---------- */

body.bv-content-v8.bv-tiktok-v8 #botviet-tiktok-studio-v7,
body.bv-content-v8.bv-tiktok-v8 #botviet-tiktok-studio-v7 *,
body.bv-content-v8.bv-tiktok-v8 #botviet-tiktok-studio-v7 .tt7-card,
body.bv-content-v8.bv-tiktok-v8 #botviet-tiktok-studio-v7 .tt7-media-preview,
body.bv-content-v8.bv-tiktok-v8 #botviet-tiktok-studio-v7 .tt7-cover-strip {
  min-width: 0 !important;
  box-sizing: border-box !important;
}

body.bv-content-v8.bv-tiktok-v8 #botviet-tiktok-studio-v7 .tt7-card {
  width: 100% !important;
  max-width: none !important;
  overflow: hidden !important;
}

body.bv-content-v8.bv-tiktok-v8 #botviet-tiktok-studio-v7 {
  font-size: clamp(.875rem, .18vw + .83rem, 1rem) !important;
}

body.bv-content-v8.bv-tiktok-v8 #botviet-tiktok-studio-v7
:is(button, label, span, p, small, strong) {
  line-height: 1.35 !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

/* ---------- 6. ICON / SVG: KHÓA KÍCH THƯỚC ---------- */

body.bv-content-v8.bv-tiktok-v8 #botviet-tiktok-studio-v7 .tt7-logo svg {
  width: 3rem !important;
  height: 3rem !important;
  max-width: 3rem !important;
  max-height: 3rem !important;
}

body.bv-content-v8.bv-tiktok-v8 #botviet-tiktok-studio-v7
:is(
  .tt7-account,
  .tt7-guide,
  .tt7-media-tab,
  .tt7-choose,
  .tt7-edit,
  .tt7-schedule-label,
  .tt7-privacy-copy,
  .tt7-switch-copy,
  .tt7-draft,
  .tt7-publish
) svg {
  width: 1.35rem !important;
  height: 1.35rem !important;
  max-width: 1.35rem !important;
  max-height: 1.35rem !important;
  flex: 0 0 1.35rem !important;
}

body.bv-content-v8.bv-tiktok-v8 #botviet-tiktok-studio-v7 .tt7-drop-icon svg {
  width: 3.5rem !important;
  height: 3.5rem !important;
  max-width: 3.5rem !important;
  max-height: 3.5rem !important;
}

/* ---------- 7. VIDEO / ẢNH TABS + UPLOAD ---------- */

body.bv-content-v8.bv-tiktok-v8 #botviet-tiktok-studio-v7 .tt7-media-tabs {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
}

body.bv-content-v8.bv-tiktok-v8 #botviet-tiktok-studio-v7 .tt7-media-tab {
  min-width: 0 !important;
  overflow: hidden !important;
}

body.bv-content-v8.bv-tiktok-v8 #botviet-tiktok-studio-v7 .tt7-drop {
  width: 100% !important;
  max-width: 100% !important;

  min-height: clamp(15rem, 25vw, 19.5rem) !important;
  padding: clamp(1rem, 2vw, 1.75rem) !important;
}

body.bv-content-v8.bv-tiktok-v8 #botviet-tiktok-studio-v7 .tt7-choose {
  width: min(100%, 20rem) !important;
  max-width: 20rem !important;
  min-width: 0 !important;
}

/* ---------- 8. MEDIA ĐÃ UPLOAD ---------- */

body.bv-content-v8.bv-tiktok-v8 #botviet-tiktok-studio-v7 .tt7-media-preview {
  width: 100% !important;
  max-width: 100% !important;

  display: flex !important;
  align-items: center !important;

  gap: clamp(.625rem, 1vw, 1rem) !important;
  overflow: hidden !important;
}

body.bv-content-v8.bv-tiktok-v8 #botviet-tiktok-studio-v7 .tt7-media-preview[hidden] {
  display: none !important;
}

body.bv-content-v8.bv-tiktok-v8 #botviet-tiktok-studio-v7 .tt7-thumb-main {
  width: clamp(6.5rem, 10vw, 9rem) !important;
  aspect-ratio: 4 / 5 !important;

  height: auto !important;
  max-width: 32% !important;

  flex: 0 0 auto !important;
  overflow: hidden !important;
}

body.bv-content-v8.bv-tiktok-v8 #botviet-tiktok-studio-v7 .tt7-thumb-main img,
body.bv-content-v8.bv-tiktok-v8 #botviet-tiktok-studio-v7 .tt7-thumb-main video {
  display: block !important;

  width: 100% !important;
  height: 100% !important;

  max-width: 100% !important;
  max-height: 100% !important;

  object-fit: cover !important;
}

body.bv-content-v8.bv-tiktok-v8 #botviet-tiktok-studio-v7 .tt7-media-info {
  min-width: 0 !important;
  flex: 1 1 auto !important;
  overflow: hidden !important;
}

body.bv-content-v8.bv-tiktok-v8 #botviet-tiktok-studio-v7 .tt7-media-info strong,
body.bv-content-v8.bv-tiktok-v8 #botviet-tiktok-studio-v7 .tt7-meta {
  display: block !important;
  max-width: 100% !important;

  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* ---------- 9. THUMBNAIL STRIP ---------- */

body.bv-content-v8.bv-tiktok-v8 #botviet-tiktok-studio-v7 .tt7-cover-strip {
  width: 100% !important;
  max-width: 100% !important;

  display: flex !important;
  gap: .625rem !important;

  overflow-x: auto !important;
  overflow-y: hidden !important;
  overscroll-behavior-inline: contain !important;
  scrollbar-width: thin !important;
}

body.bv-content-v8.bv-tiktok-v8 #botviet-tiktok-studio-v7 .tt7-cover {
  width: clamp(5.25rem, 7vw, 7rem) !important;
  flex: 0 0 clamp(5.25rem, 7vw, 7rem) !important;
}

/* ---------- 10. PRIVACY / SWITCH ---------- */

body.bv-content-v8.bv-tiktok-v8 #botviet-tiktok-studio-v7 .tt7-privacy-row {
  width: 100% !important;

  display: grid !important;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(12rem, 16rem) !important;

  gap: .875rem !important;
  align-items: center !important;
}

body.bv-content-v8.bv-tiktok-v8 #botviet-tiktok-studio-v7 .tt7-privacy-copy,
body.bv-content-v8.bv-tiktok-v8 #botviet-tiktok-studio-v7 .tt7-switch-copy {
  min-width: 0 !important;
}

body.bv-content-v8.bv-tiktok-v8 #botviet-tiktok-studio-v7 .tt7-switch-copy {
  display: flex !important;
  align-items: center !important;
  gap: .625rem !important;

  flex: 1 1 auto !important;
}

body.bv-content-v8.bv-tiktok-v8 #botviet-tiktok-studio-v7 .tt7-switch-copy span {
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

body.bv-content-v8.bv-tiktok-v8 #botviet-tiktok-studio-v7 .tt7-switch-note {
  max-width: 14rem !important;
  overflow-wrap: break-word !important;
}

@container bv-tiktok-studio (max-width: 42rem) {
  body.bv-content-v8.bv-tiktok-v8 #botviet-tiktok-studio-v7 .tt7-privacy-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* ---------- 11. ACTION BUTTONS ---------- */

body.bv-content-v8.bv-tiktok-v8 #botviet-tiktok-studio-v7 .tt7-actions {
  width: 100% !important;
  max-width: 100% !important;

  display: grid !important;
  grid-template-columns:
    minmax(8rem, .7fr)
    minmax(13rem, 1.3fr) !important;

  gap: .75rem !important;
}

@container bv-tiktok-studio (max-width: 34rem) {
  body.bv-content-v8.bv-tiktok-v8 #botviet-tiktok-studio-v7 .tt7-actions {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* ---------- 12. MOBILE ---------- */

@media (max-width: 45rem) {
  body.bv-content-v8 #page-body .content-v140,
  body.bv-content-v8 .bv-v8-content-root {
    padding-inline: .625rem !important;
  }

  body.bv-content-v8.bv-tiktok-v8 #botviet-tiktok-studio-v7 .tt7-head {
    align-items: flex-start !important;
  }

  body.bv-content-v8.bv-tiktok-v8 #botviet-tiktok-studio-v7 .tt7-head-actions {
    width: 100% !important;
    justify-content: flex-start !important;
  }
}