/* BOTVIET Content V8.7 — strictly scoped to the existing Content composer. */
body.bv-content-v87 #page-body .content-reference-shell.bv87-root {
  --bv87-bg:#0d1a2b;
  --bv87-panel:#122e4d;
  --bv87-field:#102944;
  --bv87-border:#295c80;
  --bv87-text:#eff6ff;
  --bv87-muted:#afc4d8;
  --bv87-accent:#378ff9;
}

body.bv-content-v87 #page-body .content-reference-shell.bv87-root,
body.bv-content-v87 #page-body .content-reference-shell.bv87-root * {
  box-sizing:border-box;
}

/* Native controls remain in the composer for the app's own event handlers. */
body.bv-content-v87 #page-body .content-reference-shell.bv87-root .content-channel-tabs.bv87-native-tabs {
  position:absolute!important;width:1px!important;height:1px!important;
  min-width:0!important;min-height:0!important;max-width:1px!important;
  padding:0!important;margin:0!important;overflow:hidden!important;
  clip-path:inset(50%)!important;white-space:nowrap!important;
}

body.bv-content-v87 #page-body .content-reference-shell.bv87-root .bv87-tabs {
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:12px!important;
  width:calc(100% - 56px)!important;
  min-width:0!important;
  max-width:1920px!important;
  align-items:stretch!important;
  overflow:visible!important;
  margin:0 auto 14px!important;
  padding:0!important;
}

body.bv-content-v87 #page-body .content-reference-shell.bv87-root .bv87-tabs .bv87-tab {
  --bv87-brand:#378ff9;
  position:relative!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;
  gap:5px!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  min-height:94px!important;
  height:100%!important;
  padding:13px 15px 13px 72px!important;
  margin:0!important;
  overflow:hidden!important;
  color:var(--bv87-text)!important;
  background:#142e4a!important;
  border:1px solid var(--bv87-border)!important;
  border-radius:14px!important;
  box-shadow:none!important;
  font-family:inherit!important;
  font-size:17px!important;
  font-weight:750!important;
  line-height:1.24!important;
  text-align:left!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  cursor:pointer;
}
body.bv-content-v87 #page-body .content-reference-shell.bv87-root .bv87-tab-title {
  display:block;min-width:0;max-width:100%;font-size:inherit;
  color:inherit;line-height:1.25;overflow-wrap:anywhere;
}
body.bv-content-v87 #page-body .content-reference-shell.bv87-root .bv87-tabs .bv87-tab[data-bv87-platform="tiktok"]{--bv87-brand:#51d9d8}
body.bv-content-v87 #page-body .content-reference-shell.bv87-root .bv87-tabs .bv87-tab[data-bv87-platform="tiktok_shop"]{--bv87-brand:#ff6a98}
body.bv-content-v87 #page-body .content-reference-shell.bv87-root .bv87-tabs .bv87-tab[data-bv87-platform="shopee"]{--bv87-brand:#ff854a}
body.bv-content-v87 #page-body .content-reference-shell.bv87-root .bv87-tabs .bv87-tab.bv87-active {
  border:2px solid var(--bv87-brand)!important;
  background:#193d62!important;
  box-shadow:0 0 0 1px rgba(255,255,255,.025) inset!important;
}
body.bv-content-v87 #page-body .content-reference-shell.bv87-root .bv87-tabs .bv87-tab.bv87-active::after {
  content:"";position:absolute;right:15px;top:16px;width:12px;height:12px;
  background:var(--bv87-brand);border-radius:50%;
}
body.bv-content-v87 #page-body .content-reference-shell.bv87-root .bv87-tabs .bv87-tab:is(:hover,:focus-visible) {
  border-color:var(--bv87-brand)!important;
  outline:2px solid transparent;
}
body.bv-content-v87 #page-body .content-reference-shell.bv87-root .bv87-tabs .bv87-tab:focus-visible {outline:2px solid var(--bv87-brand)!important;outline-offset:2px}
/* Use the original icon/logo elements. No SVG, img or font icon is replaced. */
body.bv-content-v87 #page-body .content-reference-shell.bv87-root .bv87-tabs .bv87-tab > .bv87-icon {
  position:absolute!important;
  left:16px!important;top:24px!important;
  width:43px!important;height:43px!important;
  max-width:43px!important;max-height:43px!important;
  flex:0 0 43px!important;
  display:grid!important;place-items:center!important;
  padding:5px!important;border:1px solid var(--bv87-brand)!important;
  border-radius:12px!important;background:#173c63!important;
  object-fit:contain!important;
}
body.bv-content-v87 #page-body .content-reference-shell.bv87-root .bv87-tabs .bv87-tab > .bv87-icon svg,
body.bv-content-v87 #page-body .content-reference-shell.bv87-root .bv87-tabs .bv87-tab > .bv87-icon img {
  width:100%!important;height:100%!important;max-width:100%!important;object-fit:contain!important;
}
body.bv-content-v87 #page-body .content-reference-shell.bv87-root .bv87-tabs .bv87-no-icon {padding-left:16px!important}
body.bv-content-v87 #page-body .content-reference-shell.bv87-root .bv87-tabs .bv87-tab-subtitle {
  display:block!important;min-width:0;max-width:100%;
  color:var(--bv87-muted)!important;font-family:inherit!important;font-size:11px!important;font-weight:400!important;line-height:1.3!important;
  white-space:normal!important;overflow-wrap:anywhere;
}

body.bv-content-v87 #page-body .content-reference-shell.bv87-root .bv87-platform-note {
  display:flex;gap:12px;align-items:center;min-width:0;max-width:100%;
  margin:12px 0 14px;padding:11px 14px;border:1px solid var(--bv87-border);
  border-radius:12px;background:#0d2844;color:var(--bv87-muted);
  font-family:inherit;font-size:13px;font-weight:400;line-height:1.5;overflow-wrap:anywhere;
}
body.bv-content-v87 #page-body .content-reference-shell.bv87-root .bv87-platform-note strong {flex:0 0 auto;color:var(--bv87-text);font-size:14px}
body.bv-content-v87 #page-body .content-reference-shell.bv87-root .bv87-platform-note span {min-width:0}

body.bv-content-v87 #page-body .content-reference-shell.bv87-root .content-compose-grid {
  display:grid!important;grid-template-columns:minmax(0,1.78fr) minmax(350px,1fr)!important;
  gap:16px!important;align-items:start!important;min-width:0!important;max-width:1976px!important;margin-inline:auto!important;
}
body.bv-content-v87 #page-body .content-reference-shell.bv87-root .content-compose-card,
body.bv-content-v87 #page-body .content-reference-shell.bv87-root .bv87-side,
body.bv-content-v87 #page-body .content-reference-shell.bv87-root .content-preview-card {
  min-width:0!important;max-width:100%!important;
}
body.bv-content-v87 #page-body .content-reference-shell.bv87-root .content-compose-card,
body.bv-content-v87 #page-body .content-reference-shell.bv87-root .bv87-schedule-card,
body.bv-content-v87 #page-body .content-reference-shell.bv87-root .content-preview-card {
  background:var(--bv87-panel)!important;border:1px solid var(--bv87-border)!important;
  border-radius:16px!important;box-shadow:none!important;overflow:hidden!important;
}
body.bv-content-v87 #page-body .content-reference-shell.bv87-root .content-compose-card {padding:19px 20px!important;overflow:visible!important}
body.bv-content-v87 #page-body .content-reference-shell.bv87-root .bv87-side {display:flex;flex-direction:column;gap:16px}
body.bv-content-v87 #page-body .content-reference-shell.bv87-root .content-compose-card :is(
  .content-message-box,.content-media-hashtag-row,.content-media-strip,
  .content-publish-advanced,.content-submit-row,.content-schedule-row
) {min-width:0!important;max-width:100%!important}
body.bv-content-v87 #page-body .content-reference-shell.bv87-root .content-compose-card :is(
  .content-message-box,.content-publish-advanced,.content-submit-row
) > * {min-width:0;max-width:100%}
body.bv-content-v87 #page-body .content-reference-shell.bv87-root .bv87-schedule-card,
body.bv-content-v87 #page-body .content-reference-shell.bv87-root .content-preview-card {padding:18px 20px!important}
body.bv-content-v87 #page-body .content-reference-shell.bv87-root .bv87-schedule-card h3,
body.bv-content-v87 #page-body .content-reference-shell.bv87-root .content-compose-card > h3,
body.bv-content-v87 #page-body .content-reference-shell.bv87-root .content-preview-card > h3 {
  margin:0 0 16px;color:var(--bv87-text);font-size:18px;line-height:1.35;font-weight:750;
}
body.bv-content-v87 #page-body .content-reference-shell.bv87-root .bv87-schedule-card .content-schedule-row {
  display:grid!important;grid-template-columns:1fr!important;gap:9px!important;
  padding:0!important;border:0!important;min-width:0!important;max-width:100%!important;
}
body.bv-content-v87 #page-body .content-reference-shell.bv87-root .content-preview-card {min-height:320px!important}
body.bv-content-v87 #page-body .content-reference-shell.bv87-root .content-facebook-preview {min-width:0!important;max-width:100%!important;overflow:hidden!important}

body.bv-content-v87 #page-body .content-reference-shell.bv87-root .content-compose-card :is(input,select,button,textarea),
body.bv-content-v87 #page-body .content-reference-shell.bv87-root .bv87-side :is(input,select,button,textarea) {
  min-width:0;max-width:100%;font-family:inherit!important;font-size:15px!important;line-height:1.45;
}
body.bv-content-v87 #page-body .content-reference-shell.bv87-root .content-compose-card :is(input,select,textarea),
body.bv-content-v87 #page-body .content-reference-shell.bv87-root .bv87-side :is(input,select,textarea) {
  border-radius:10px;color:var(--bv87-text);background:var(--bv87-field);
}
body.bv-content-v87 #page-body .content-reference-shell.bv87-root .content-compose-card textarea {min-height:155px!important;max-height:390px!important;resize:vertical}
body.bv-content-v87 #page-body .content-reference-shell.bv87-root :is(input,select,button,textarea):focus-visible {outline:2px solid var(--bv87-accent);outline-offset:2px}
body.bv-content-v87 #page-body .content-reference-shell.bv87-root .content-compose-card :is(label,.v4-field-label,.v4-section-label),
body.bv-content-v87 #page-body .content-reference-shell.bv87-root .bv87-side label {font-size:14px!important;font-weight:600!important;line-height:1.45}
body.bv-content-v87 #page-body .content-reference-shell.bv87-root .content-compose-card :is(.content-media-strip,.content-media-hashtag-row,.content-submit-row),
body.bv-content-v87 #page-body .content-reference-shell.bv87-root .bv87-side :is(.content-schedule-row,.content-preview-brand) {min-width:0!important;max-width:100%!important}

body.bv-content-v87 #page-body .content-reference-shell.bv87-root .bv87-affiliate-card {
  margin:12px 0;padding:15px;border:1px solid var(--bv87-border);border-radius:12px;
  background:#102944;overflow-wrap:anywhere;
}
body.bv-content-v87 #page-body .content-reference-shell.bv87-root .bv87-affiliate-card[hidden],
body.bv-content-v87 #page-body .content-reference-shell.bv87-root .bv87-publish-warning[hidden] {display:none!important}
body.bv-content-v87 #page-body .content-reference-shell.bv87-root .bv87-affiliate-card label {display:block;margin:0 0 7px;color:var(--bv87-text)}
body.bv-content-v87 #page-body .content-reference-shell.bv87-root .bv87-affiliate-card input {
  display:block;width:100%;min-height:46px;padding:9px 13px;border:1px solid var(--bv87-border);
  border-radius:10px;color:var(--bv87-text);background:#0b2039;
}
body.bv-content-v87 #page-body .content-reference-shell.bv87-root .bv87-affiliate-explain {margin:8px 0 0;color:var(--bv87-muted);font-size:12px;line-height:1.5}
body.bv-content-v87 #page-body .content-reference-shell.bv87-root .bv87-publish-warning {
  margin:10px 0;padding:12px 14px;border:1px solid #e58c6a;border-radius:10px;
  background:#39261f;color:#ffe2d4;font-size:13px;
}

@media (max-width:1050px) {
  body.bv-content-v87 #page-body .content-reference-shell.bv87-root .content-compose-grid {grid-template-columns:minmax(0,1fr)!important}
  body.bv-content-v87 #page-body .content-reference-shell.bv87-root .bv87-tabs {grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media (max-width:1240px) and (min-width:581px) {
  body.bv-content-v87 #page-body .content-reference-shell.bv87-root .bv87-tabs {width:calc(100% - 36px)!important}
}
/* The app sidebar changes the available width independently from window width. */
body.bv-content-v87 #page-body .content-reference-shell.bv87-root {container-name:bv87-content;container-type:inline-size;width:100%;min-width:0;max-width:100%}
@container bv87-content (max-width:970px) {
  body.bv-content-v87 #page-body .content-reference-shell.bv87-root .content-compose-grid {grid-template-columns:minmax(0,1fr)!important}
}
@container bv87-content (max-width:680px) {
  body.bv-content-v87 #page-body .content-reference-shell.bv87-root .bv87-tabs {grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media (max-width:580px) {
  body.bv-content-v87 #page-body .content-reference-shell.bv87-root .bv87-tabs {gap:7px!important;width:calc(100% - 20px)!important;max-width:none!important;margin-inline:auto!important}
  body.bv-content-v87 #page-body .content-reference-shell.bv87-root .bv87-tabs .bv87-tab {min-height:79px!important;padding:10px 8px 9px 52px!important;font-size:13px!important}
  body.bv-content-v87 #page-body .content-reference-shell.bv87-root .bv87-tabs .bv87-tab > .bv87-icon {left:9px!important;top:18px!important;width:33px!important;height:33px!important}
  body.bv-content-v87 #page-body .content-reference-shell.bv87-root .bv87-tabs .bv87-tab-subtitle {font-size:9px!important}
  body.bv-content-v87 #page-body .content-reference-shell.bv87-root .bv87-platform-note {display:block}
  body.bv-content-v87 #page-body .content-reference-shell.bv87-root .bv87-platform-note span {display:block;margin-top:4px}
  body.bv-content-v87 #page-body .content-reference-shell.bv87-root .content-compose-card,
  body.bv-content-v87 #page-body .content-reference-shell.bv87-root .bv87-schedule-card,
  body.bv-content-v87 #page-body .content-reference-shell.bv87-root .content-preview-card {padding:14px!important}
}

/* Older V8.2/V8.4 DOM heuristics can mark a whole composer as a four-column
   statistic/platform group. Undo only those false-positive marks. */
body.bv-content-v87 #page-body .content-reference-shell.bv87-root .bv-v84-platform-switcher:has(.content-compose-grid),
body.bv-content-v87 #page-body .content-reference-shell.bv87-root.bv-v84-platform-switcher {
  display:block!important;grid-template-columns:none!important;
  height:auto!important;overflow:visible!important;clip-path:none!important;
}
body.bv-content-v87 #page-body .content-reference-shell.bv87-root :is(.bv-v82-stats,.bv-v84-stats):has(.content-compose-grid),
body.bv-content-v87 #page-body .content-reference-shell.bv87-root:is(.bv-v82-stats,.bv-v84-stats) {
  display:block!important;grid-template-columns:none!important;
  height:auto!important;max-width:100%!important;overflow:visible!important;
  clip-path:none!important;background:transparent!important;border:0!important;
}
body.bv-content-v87 #page-body .content-reference-shell.bv87-root :is(.bv-v82-page-head,.bv-v84-page-head,.bv-v82-recent,.bv-v84-recent):has(.content-compose-grid),
body.bv-content-v87 #page-body .content-reference-shell.bv87-root:is(.bv-v82-page-head,.bv-v84-page-head,.bv-v82-recent,.bv-v84-recent) {
  height:auto!important;overflow:visible!important;clip-path:none!important;
}
body.bv-content-v87 #page-body .content-reference-shell.bv87-root .bv-v84-platform-item:has(.content-compose-grid) {
  width:auto!important;max-width:100%!important;height:auto!important;
}
body.bv-content-v87 #page-body .content-reference-shell.bv87-root .bv-v84-platform-switcher:has(.content-compose-grid) > .bv-v84-platform-item,
body.bv-content-v87 #page-body .content-reference-shell.bv87-root.bv-v84-platform-switcher > .bv-v84-platform-item {
  height:auto!important;min-width:0!important;max-width:100%!important;
}

/* V8.8: the v8 fallback and v8.7 inline-size container can give the flex
   child .app-shell a zero intrinsic content width. On the live /app/content
   page this reduced #page-body to 27px and the four visible tabs to 0px.
   Give the app's existing flex item its available width. The content-only body
   class keeps every other app route out of scope. */
body.bv-content-v87.bv-content-v8 #app > .app-shell.user-app-shell {
  flex:1 1 0%!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
}
body.bv-content-v87.bv-content-v8 #app > .app-shell.user-app-shell > .content {
  width:auto!important;
  min-width:0!important;
}

/* Ignore the absolute pixel width calculated by the older viewport fallback.
   The actual available width now comes from the app shell above. */
body.bv-content-v87.bv-content-v8 #page-body .content-reference-shell.content-v140.bv87-root.bv-v8-viewport-fallback {
  width:100%!important;
  max-width:100%!important;
}

/* V8.9: align every direct section to the same content edges. The older
   desktop rules give stats/recent 28px side margins while V8 sets width:100%,
   pushing the lower card beyond the right edge. */
body.bv-content-v87 #page-body .content-reference-shell.bv87-root > :is(
  .content-reference-header,.bv87-tabs,.content-stats-grid,
  .content-compose-grid,.content-management-card
) {
  width:100%!important;
  min-width:0!important;
  max-width:1976px!important;
  margin-inline:auto!important;
}
body.bv-content-v87 #page-body .content-reference-shell.bv87-root > .content-compose-grid {
  padding-inline:0!important;
}

/* Keep the preview card at the height of its contents. On desktop, the V8
   workspace stretches it to the whole height of the much taller editor. */
body.bv-content-v87 #page-body .content-reference-shell.bv87-root .content-compose-grid > .content-preview-card {
  align-self:start!important;
  height:auto!important;
  min-height:320px!important;
}
body.bv-content-v87 #page-body .content-reference-shell.bv87-root .content-preview-card > .content-facebook-preview {
  flex:0 1 auto!important;
  height:auto!important;
  min-width:0!important;
}

/* Give search and filter their own measured slot; tabs get the entire next
   row. The previous 240px slot had 326px of controls and overflowed by 69px. */
body.bv-content-v87 #page-body .content-reference-shell.bv87-root .content-management-card .content-management-head.bv-v82-recent-toolbar {
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,330px)!important;
  gap:10px 14px!important;
  align-items:center!important;
  min-width:0!important;
  max-width:100%!important;
}
body.bv-content-v87 #page-body .content-reference-shell.bv87-root .content-management-head > h3 {
  grid-column:1!important;
  grid-row:1!important;
  min-width:0!important;
}
body.bv-content-v87 #page-body .content-reference-shell.bv87-root .content-management-head > .content-management-tabs {
  grid-column:1 / -1!important;
  grid-row:2!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  flex:none!important;
}
body.bv-content-v87 #page-body .content-reference-shell.bv87-root .content-management-head > .content-management-filters {
  grid-column:2!important;
  grid-row:1!important;
  display:flex!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  flex:none!important;
  flex-wrap:nowrap;
  justify-content:flex-end;
}
body.bv-content-v87 #page-body .content-reference-shell.bv87-root .content-management-filters > input {
  width:auto!important;
  min-width:0!important;
  flex:1 1 0!important;
}
body.bv-content-v87 #page-body .content-reference-shell.bv87-root .content-management-head > .content-management-filters.v4-filters-open {
  grid-column:1 / -1!important;
  grid-row:3!important;
  flex-wrap:wrap!important;
}
@media (max-width:1050px) {
  body.bv-content-v87 #page-body .content-reference-shell.bv87-root .content-management-card .content-management-head.bv-v82-recent-toolbar {
    grid-template-columns:minmax(0,1fr)!important;
  }
  body.bv-content-v87 #page-body .content-reference-shell.bv87-root .content-management-head > :is(h3,.content-management-tabs,.content-management-filters,.content-management-filters.v4-filters-open) {
    grid-column:1!important;
  }
  body.bv-content-v87 #page-body .content-reference-shell.bv87-root .content-management-head > .content-management-filters {
    grid-row:3!important;
  }
}