/* ============================================================
   BOTVIET - TikTok Studio V8.1 refinement
   - bo góc đều, chống vỡ khung
   - 2 khung chính cân đối ở giữa
   - khung xem trước ảnh/video đưa xuống dưới mục Lên lịch đăng
   - chỉ tác động khi chọn kênh TikTok trong /app/content
   - cần BOTVIET Content Fluid + TikTok V8 core
   ============================================================ */

body.bv-content-v8.bv-tiktok-v8.bv-tiktok-v81 #botviet-tiktok-studio-v7 {
  --tt81-radius-xl: 22px;
  --tt81-radius-lg: 18px;
  --tt81-radius-md: 14px;
  --tt81-card-border: rgba(73, 183, 255, 0.22);
  --tt81-card-bg: linear-gradient(180deg, rgba(5, 31, 63, 0.96), rgba(4, 21, 45, 0.98));
  --tt81-soft-line: rgba(106, 192, 255, 0.16);
}

/* Khung ngoài */
body.bv-content-v8.bv-tiktok-v8.bv-tiktok-v81 #botviet-tiktok-studio-v7 .tt7-shell {
  border-radius: var(--tt81-radius-xl) !important;
  overflow: hidden !important;
}

/* Hai panel chính đều nhau, đẹp và không bị vỡ */
body.bv-content-v8.bv-tiktok-v8.bv-tiktok-v81 #botviet-tiktok-studio-v7 .tt7-grid {
  align-items: stretch !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: clamp(.875rem, 1.25vw, 1.25rem) !important;
}

body.bv-content-v8.bv-tiktok-v8.bv-tiktok-v81 #botviet-tiktok-studio-v7 .tt81-panel {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 100% !important;
  border-radius: var(--tt81-radius-xl) !important;
  overflow: hidden !important;
  background: var(--tt81-card-bg) !important;
  border: 1px solid var(--tt81-card-border) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02) !important;
  display: flex !important;
  flex-direction: column !important;
}

body.bv-content-v8.bv-tiktok-v8.bv-tiktok-v81 #botviet-tiktok-studio-v7 .tt81-media-panel,
body.bv-content-v8.bv-tiktok-v8.bv-tiktok-v81 #botviet-tiktok-studio-v7 .tt81-content-panel {
  justify-content: flex-start !important;
}

/* Card con cùng ngôn ngữ bo góc */
body.bv-content-v8.bv-tiktok-v8.bv-tiktok-v81 #botviet-tiktok-studio-v7
:is(
  .tt7-card,
  .tt7-drop,
  .tt7-media-preview,
  .tt7-edit,
  .tt7-schedule,
  .tt7-actions,
  .tt7-guide,
  .tt7-account,
  .tt7-cover,
  .tt81-preview-card,
  .tt81-schedule-shell
) {
  border-radius: var(--tt81-radius-lg) !important;
  overflow: hidden !important;
}

body.bv-content-v8.bv-tiktok-v8.bv-tiktok-v81 #botviet-tiktok-studio-v7
:is(
  .tt7-cover,
  .tt7-edit,
  .tt7-schedule,
  .tt7-actions,
  .tt81-preview-card
) {
  border: 1px solid var(--tt81-soft-line) !important;
  background: rgba(7, 23, 48, 0.92) !important;
}

/* Dropzone gọn gàng và không vỡ */
body.bv-content-v8.bv-tiktok-v8.bv-tiktok-v81 #botviet-tiktok-studio-v7 .tt7-drop {
  border-radius: var(--tt81-radius-xl) !important;
  border: 1px dashed rgba(154, 214, 255, 0.35) !important;
  overflow: hidden !important;
}

/* Khối upload / nội dung có padding đều */
body.bv-content-v8.bv-tiktok-v8.bv-tiktok-v81 #botviet-tiktok-studio-v7 .tt81-panel > * {
  min-width: 0 !important;
}

/* 2 panel đầu cân đều hơn */
body.bv-content-v8.bv-tiktok-v8.bv-tiktok-v81 #botviet-tiktok-studio-v7 .tt81-content-panel {
  gap: .875rem !important;
}

/* Không để nội dung chạy sát mép */
body.bv-content-v8.bv-tiktok-v8.bv-tiktok-v81 #botviet-tiktok-studio-v7 .tt7-caption-wrap,
body.bv-content-v8.bv-tiktok-v8.bv-tiktok-v81 #botviet-tiktok-studio-v7 .tt7-cover-wrap,
body.bv-content-v8.bv-tiktok-v8.bv-tiktok-v81 #botviet-tiktok-studio-v7 .tt7-privacy,
body.bv-content-v8.bv-tiktok-v8.bv-tiktok-v81 #botviet-tiktok-studio-v7 .tt7-actions,
body.bv-content-v8.bv-tiktok-v8.bv-tiktok-v81 #botviet-tiktok-studio-v7 .tt7-edit,
body.bv-content-v8.bv-tiktok-v8.bv-tiktok-v81 #botviet-tiktok-studio-v7 .tt7-media-preview {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* Lên lịch đăng đẹp, nằm riêng thành 1 khối đồng bộ */
body.bv-content-v8.bv-tiktok-v8.bv-tiktok-v81 #botviet-tiktok-studio-v7 .tt81-schedule-shell {
  width: 100% !important;
  max-width: 100% !important;
  padding: .875rem 1rem !important;
  background: rgba(7, 23, 48, 0.92) !important;
  border: 1px solid var(--tt81-soft-line) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: .875rem !important;
  box-sizing: border-box !important;
}

body.bv-content-v8.bv-tiktok-v8.bv-tiktok-v81 #botviet-tiktok-studio-v7 .tt81-schedule-shell .tt81-schedule-copy {
  display: flex !important;
  align-items: center !important;
  gap: .75rem !important;
  min-width: 0 !important;
}

body.bv-content-v8.bv-tiktok-v8.bv-tiktok-v81 #botviet-tiktok-studio-v7 .tt81-schedule-shell .tt81-schedule-copy strong {
  display: block !important;
  font-size: 1rem !important;
  line-height: 1.2 !important;
}

body.bv-content-v8.bv-tiktok-v8.bv-tiktok-v81 #botviet-tiktok-studio-v7 .tt81-schedule-shell .tt81-schedule-copy small {
  display: block !important;
  opacity: .82 !important;
}

/* Khung xem trước ảnh/video nằm dưới Lên lịch đăng */
body.bv-content-v8.bv-tiktok-v8.bv-tiktok-v81 #botviet-tiktok-studio-v7 .tt81-preview-card {
  width: 100% !important;
  max-width: 100% !important;
  padding: .875rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: .75rem !important;
  overflow: hidden !important;
}

body.bv-content-v8.bv-tiktok-v8.bv-tiktok-v81 #botviet-tiktok-studio-v7 .tt81-preview-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: .5rem !important;
}

body.bv-content-v8.bv-tiktok-v8.bv-tiktok-v81 #botviet-tiktok-studio-v7 .tt81-preview-head strong {
  font-size: 1rem !important;
}

body.bv-content-v8.bv-tiktok-v8.bv-tiktok-v81 #botviet-tiktok-studio-v7 .tt81-preview-note {
  font-size: .8125rem !important;
  opacity: .78 !important;
}

body.bv-content-v8.bv-tiktok-v8.bv-tiktok-v81 #botviet-tiktok-studio-v7 .tt81-preview-card .tt7-media-preview {
  margin: 0 !important;
  border-radius: var(--tt81-radius-lg) !important;
}

/* Ảnh/video preview vừa khung */
body.bv-content-v8.bv-tiktok-v8.bv-tiktok-v81 #botviet-tiktok-studio-v7 .tt7-thumb-main {
  border-radius: 12px !important;
  overflow: hidden !important;
}

body.bv-content-v8.bv-tiktok-v8.bv-tiktok-v81 #botviet-tiktok-studio-v7 .tt7-thumb-main img,
body.bv-content-v8.bv-tiktok-v8.bv-tiktok-v81 #botviet-tiktok-studio-v7 .tt7-thumb-main video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Nút hành động đồng bộ hơn */
body.bv-content-v8.bv-tiktok-v8.bv-tiktok-v81 #botviet-tiktok-studio-v7 .tt7-actions {
  display: grid !important;
  grid-template-columns: minmax(8rem,.8fr) minmax(13rem,1.2fr) !important;
  gap: .75rem !important;
}

/* Giữ các switch và text không bị méo */
body.bv-content-v8.bv-tiktok-v8.bv-tiktok-v81 #botviet-tiktok-studio-v7 .tt7-privacy-row {
  align-items: center !important;
}

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

/* Nếu preview trống thì card preview ẩn hẳn */
body.bv-content-v8.bv-tiktok-v8.bv-tiktok-v81 #botviet-tiktok-studio-v7 .tt81-preview-card[hidden] {
  display: none !important;
}

/* Responsive vừa khung, không vỡ */
@container bv-tiktok-studio (max-width: 60rem) {
  body.bv-content-v8.bv-tiktok-v8.bv-tiktok-v81 #botviet-tiktok-studio-v7 .tt7-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

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

  body.bv-content-v8.bv-tiktok-v8.bv-tiktok-v81 #botviet-tiktok-studio-v7 .tt81-schedule-shell {
    flex-direction: column !important;
    align-items: stretch !important;
  }
}

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