/* checkpoint 7: submit flow */
.cctp-submit{padding:18px 0 30px}.cctp-submit h1{margin:0 0 18px;font-size:28px}.cctp-submit__field{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:10px;align-items:center;margin-bottom:18px}.cctp-submit__field label,.cctp-submit__legend{font-weight:800;white-space:nowrap}.cctp-submit__field input{width:100%;min-width:0;min-height:48px;border:1px solid var(--cctp-border);border-radius:var(--cctp-radius);padding:10px 12px;font:inherit}.cctp-submit__choice{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:10px;align-items:center;margin:0 0 14px}.cctp-choice-row{display:flex;gap:8px;margin-top:0;min-width:0}.cctp-choice-row button{min-width:88px;min-height:44px;border:1px solid #cbd1d8;border-radius:var(--cctp-radius);background:#fff;font:inherit;font-weight:800;cursor:pointer}.cctp-choice-row button.is-selected{background:#173f75;color:#fff;border-color:#173f75}.cctp-submit__branch{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:10px;align-items:center;padding:12px 0;border-top:1px solid var(--cctp-border)}.cctp-submit__branch strong{white-space:nowrap}.cctp-submit__branch .cctp-choice-row button{min-width:72px}.cctp-submit-composer{margin-top:8px;border:1px solid var(--cctp-border);border-radius:var(--cctp-radius);overflow:hidden}.cctp-submit-composer[hidden],.cctp-submit__branch[hidden],.cctp-submit-success[hidden]{display:none!important}.cctp-submit-composer textarea{width:100%;min-height:180px;padding:13px;border:0;outline:0;resize:vertical;font:inherit;line-height:1.55}.cctp-submit-composer__bottom{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:9px;align-items:center;padding:9px;border-top:1px solid var(--cctp-border)}.cctp-submit-composer__bottom span{font-size:12px;color:var(--cctp-muted)}.cctp-submit-composer__bottom .is-ready{color:#19733d}.cctp-submit-composer__bottom .is-over{color:#9a2525}.cctp-submit-success{margin-top:14px;padding:12px;border:1px solid #c8dfcf;border-radius:var(--cctp-radius);background:#f6fff8}.cctp-submit-success__head{display:flex;gap:10px;align-items:center}.cctp-submit-success__head img{width:48px;height:48px;object-fit:cover;border-radius:var(--cctp-radius)}.cctp-submit-success__head div{display:grid}.cctp-submit-success__head span{font-size:13px;color:var(--cctp-muted)}.cctp-submit-success p{white-space:pre-wrap;overflow-wrap:anywhere}
@media(max-width:720px){.cctp-submit{padding-top:14px}}
@media(max-width:430px){.cctp-submit h1{font-size:25px}.cctp-submit__field,.cctp-submit__choice,.cctp-submit__branch{gap:7px}.cctp-choice-row{gap:6px}.cctp-choice-row button{min-width:72px;padding-left:10px;padding-right:10px}.cctp-submit__branch .cctp-choice-row button{min-width:62px}.cctp-submit__branch strong{font-size:15px}.cctp-submit-composer__bottom{grid-template-columns:1fr auto}.cctp-submit-composer__bottom .cctp-button{grid-column:1/-1;width:100%}}
@media(max-width:390px){.cctp-submit__field,.cctp-submit__choice,.cctp-submit__branch{gap:6px}.cctp-choice-row{gap:5px}.cctp-choice-row button{min-width:66px}.cctp-submit__branch .cctp-choice-row button{min-width:58px}.cctp-submit__branch strong{font-size:14px}}
@media(max-width:390px){.cctp-choice-row{gap:6px}.cctp-choice-row button{min-width:78px}}

/* step 7 hotfix: mobile submit choices fill the remaining row equally */
@media (max-width:720px) {
  .cctp-submit__choice .cctp-choice-row,
  .cctp-submit__branch .cctp-choice-row {
    width:100%;
  }
  .cctp-submit__choice .cctp-choice-row button,
  .cctp-submit__branch .cctp-choice-row button {
    flex:1 1 0;
    width:0;
    min-width:0;
    padding-left:8px;
    padding-right:8px;
  }
}

/* step 7 hotfix: focused mobile composer becomes a full-screen writing sheet */
@media (max-width:720px) {
  body.cctp-submit-composer-open {
    overflow:hidden;
    overscroll-behavior:none;
  }

  .cctp-submit-composer.is-mobile-sheet {
    position:fixed;
    z-index:10000;
    top:var(--cctp-composer-top, 0px);
    left:0;
    right:0;
    width:100%;
    height:var(--cctp-composer-vh, 100dvh);
    margin:0;
    display:grid;
    grid-template-rows:minmax(0,1fr) auto;
    background:#fff;
    border:0;
    border-radius:0;
    overflow:hidden;
  }

  .cctp-submit-composer.is-mobile-sheet textarea {
    display:block;
    width:100%;
    height:100%;
    min-height:0;
    padding:18px;
    border:0;
    border-bottom:1px solid var(--cctp-border);
    border-radius:0;
    outline:0;
    resize:none;
    overflow-y:auto;
    font-size:18px;
    line-height:1.55;
    background:#fff;
  }

  .cctp-submit-composer.is-mobile-sheet .cctp-submit-composer__bottom {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:10px 12px;
    align-items:center;
    padding:10px 16px 12px;
    border-top:0;
    background:#fff;
  }

  .cctp-submit-composer.is-mobile-sheet .cctp-submit-composer__bottom span {
    font-size:14px;
  }

  .cctp-submit-composer.is-mobile-sheet .cctp-submit-composer__bottom [data-counter] {
    justify-self:end;
  }

  .cctp-submit-composer.is-mobile-sheet .cctp-submit-composer__bottom .cctp-button {
    grid-column:1 / -1;
    width:100%;
    min-height:52px;
    margin:0;
    font-size:18px;
  }
}

/* step 7 hotfix: only the live character number is red */
.cctp-submit-composer__bottom [data-counter] {
  color:var(--cctp-muted);
  font-weight:400;
}
.cctp-submit-composer__bottom [data-counter-current] {
  color:#d93025;
  font-weight:700;
}
.cctp-submit-composer__bottom [data-counter-max] {
  color:var(--cctp-muted);
  font-weight:400;
}


/* step 7 hotfix: compact paper-plane send action beside the counter */
.cctp-submit-send {
  width:44px;
  min-width:44px;
  height:44px;
  min-height:44px;
  padding:0;
  display:inline-grid;
  place-items:center;
  border-radius:var(--cctp-radius);
}
.cctp-submit-send svg {
  width:23px;
  height:23px;
  display:block;
}
.cctp-submit-send[aria-busy="true"] svg {
  opacity:.58;
}
.cctp-sr-only {
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

@media (max-width:720px) {
  .cctp-submit-composer.is-mobile-sheet .cctp-submit-composer__bottom {
    grid-template-columns:minmax(0,1fr) auto auto;
    gap:8px;
    padding:10px 16px 12px;
  }
  .cctp-submit-composer.is-mobile-sheet .cctp-submit-composer__bottom [data-status] {
    min-width:0;
  }
  .cctp-submit-composer.is-mobile-sheet .cctp-submit-composer__bottom [data-counter] {
    justify-self:end;
    white-space:nowrap;
  }
  .cctp-submit-composer.is-mobile-sheet .cctp-submit-composer__bottom .cctp-submit-send {
    grid-column:auto;
    width:44px;
    min-width:44px;
    height:44px;
    min-height:44px;
    margin:0;
    padding:0;
    font-size:inherit;
  }
}

@media (max-width:430px) {
  .cctp-submit-composer__bottom {
    grid-template-columns:minmax(0,1fr) auto auto;
  }
  .cctp-submit-composer__bottom .cctp-submit-send {
    grid-column:auto;
    width:44px;
    min-width:44px;
  }
}

/* step 7 hotfix: send button is enabled by valid content; visible paper-plane + Gửi label */
.cctp-submit-send {
  width:auto;
  min-width:78px;
  height:44px;
  min-height:44px;
  padding:0 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
}
.cctp-submit-send__label {
  display:inline-block;
  color:inherit;
  font-weight:800;
  line-height:1;
}
@media (max-width:720px) {
  .cctp-submit-composer.is-mobile-sheet .cctp-submit-composer__bottom .cctp-submit-send {
    width:auto;
    min-width:78px;
    padding:0 12px;
  }
}
@media (max-width:430px) {
  .cctp-submit-composer__bottom .cctp-submit-send {
    width:auto;
    min-width:78px;
    padding:0 11px;
  }
}

/* step 7 hotfix: require a valid name before showing gender choices */
.cctp-submit__choice[hidden]{display:none!important}

/* STEP 7 hotfix: selected submit-flow choices use the new blue only. */
.cctp-submit .cctp-choice-row button.is-selected {
    background: #0C45AE;
    color: #FFFFFF;
    border-color: #0C45AE;
}

/* Photo category step shown after CHÁN / CƠM / THÈM / PHỞ. */
.cctp-submit__photo-step{display:grid;grid-template-columns:160px minmax(0,1fr);align-items:center;gap:12px;margin-top:18px;padding-top:18px;border-top:1px solid var(--cctp-border)}
.cctp-submit__photo-step[hidden]{display:none!important}
.cctp-submit__photo-step label{font-weight:800;color:var(--cctp-text)}
.cctp-submit__photo-step select{width:100%;min-height:52px;padding:10px 38px 10px 13px;font-size:16px}
@media(max-width:520px){.cctp-submit__photo-step{grid-template-columns:1fr;gap:8px}.cctp-submit__photo-step select{min-height:56px}}


/* STEP 7 hotfix: mobile composer cancel control at bottom-center of textarea. */
.cctp-submit-composer__writing {
  position:relative;
}
.cctp-submit-cancel {
  display:none;
}
@media (max-width:720px) {
  .cctp-submit-composer.is-mobile-sheet .cctp-submit-composer__writing {
    position:relative;
    min-height:0;
    height:100%;
    overflow:hidden;
  }
  .cctp-submit-composer.is-mobile-sheet .cctp-submit-composer__writing textarea {
    width:100%;
    height:100%;
    padding-bottom:64px;
  }
  .cctp-submit-composer.is-mobile-sheet .cctp-submit-cancel {
    display:flex;
    position:absolute;
    z-index:2;
    left:50%;
    bottom:12px;
    transform:translateX(-50%);
    width:42px;
    height:42px;
    min-width:42px;
    min-height:42px;
    padding:0;
    align-items:center;
    justify-content:center;
    border:0;
    border-radius:50%;
    background:#d9dde2;
    color:#2f3337;
    font:700 27px/1 Arial,sans-serif;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    box-shadow:0 1px 3px rgba(0,0,0,.18);
  }
  .cctp-submit-composer.is-mobile-sheet .cctp-submit-cancel:active {
    background:#c8cdd3;
    transform:translateX(-50%) scale(.96);
  }
}


/* STEP 14 HOTFIX — submit success ID + enabled Send text must stay white. */
.cctp-submit-send:not(:disabled),
.cctp-submit-send:not(:disabled) .cctp-submit-send__label {
  color:#fff !important;
}
.cctp-submit-success__id {
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:6px 10px;
  margin-top:10px;
}
.cctp-submit-success__id strong {
  color:var(--cctp-text);
}
.cctp-submit-success__id span {
  color:var(--cctp-muted);
  font-size:13px;
}

/* Direct flow: title -> choose one of the four content groups. */
.cctp-submit__group-step {
  display:grid;
  grid-template-columns:max-content minmax(0,1fr);
  gap:10px;
  align-items:center;
  margin:0 0 18px;
  padding:0 0 18px;
  border-bottom:1px solid var(--cctp-border);
}
.cctp-submit__group-step[hidden] {
  display:none !important;
}
.cctp-choice-row--groups {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
}
.cctp-choice-row--groups button {
  min-width:0;
  padding:0 8px;
}
@media(max-width:520px) {
  .cctp-submit__group-step {
    grid-template-columns:1fr;
  }
  .cctp-choice-row--groups {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}