.submission{background:var(--color-white);border-bottom:1px solid var(--color-divider);padding:22px var(--space-4)}
.submission__heading h2{margin:0;font-size:1.35rem;line-height:1.25}.submission__heading p{margin:5px 0 16px;color:var(--color-muted);line-height:1.45}
.submission__roles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0;padding:0;border:0}
.submission__role{position:relative;display:flex;align-items:center;justify-content:center;min-height:48px;border:2px solid currentColor;border-radius:var(--radius-small);font-weight:800;cursor:pointer;background:#fff;transition:background-color .15s,color .15s,border-color .15s}
.submission__role--com{color:var(--color-com)}.submission__role--pho{color:var(--color-pho)}
.submission__role input{position:absolute;opacity:0;pointer-events:none}.submission__role:has(input:checked){color:#fff}.submission__role--com:has(input:checked){background:var(--color-com);border-color:var(--color-com)}.submission__role--pho:has(input:checked){background:var(--color-pho);border-color:var(--color-pho)}
.submission__role:has(input:focus-visible){outline:2px solid var(--color-link);outline-offset:3px}
.submission__composer{margin-top:18px}.submission__prompt{display:block;margin-bottom:8px;font-weight:750;line-height:1.4}
.submission textarea{display:block;width:100%;min-height:132px;resize:vertical;border:1px solid #b8bec8;border-radius:var(--radius-small);padding:12px;background:#fff;color:#000;line-height:1.5}.submission textarea[aria-invalid="true"]{border-color:var(--color-danger)}
.submission__meta{display:flex;justify-content:space-between;gap:12px;margin-top:7px;font-size:.86rem;color:var(--color-muted)}.submission__counter{white-space:nowrap;font-variant-numeric:tabular-nums}.submission__counter.is-invalid,.submission__message.is-error{color:var(--color-danger)}.submission__counter.is-valid,.submission__message.is-success{color:var(--color-success)}
.submission__message{min-height:21px;margin:8px 0 7px;font-size:.92rem;line-height:1.4}.submission__submit{width:100%;min-height:48px;border:0;border-radius:var(--radius-small);background:var(--color-black);color:var(--color-white);font-weight:800;cursor:pointer}.submission__submit:disabled{opacity:.55;cursor:wait}
.submission__honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.submission__success{padding:18px 0 2px;text-align:center}.submission__success>strong{display:block;font-size:1.08rem}.submission__post-id{display:block;margin:10px 0 6px;font-size:2rem;font-weight:900;letter-spacing:.02em}.submission__success p{margin:0;color:var(--color-muted);line-height:1.45}
.submission-prepend:empty{display:none}.submission-new-post{padding:14px var(--space-4);border-bottom:1px solid var(--color-divider);background:#fff}.submission-new-post__top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}.submission-new-post__role{font-weight:850}.submission-new-post__role--com{color:var(--color-com)}.submission-new-post__role--pho{color:var(--color-pho)}.submission-new-post__id{color:var(--color-link);font-weight:800}.submission-new-post p{margin:0;line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:720px){.submission{padding:20px 16px}.submission textarea{min-height:128px}}
@media (max-width:430px){.submission{padding:18px 14px}.submission__roles{gap:8px}.submission__meta{font-size:.82rem}.submission__post-id{font-size:1.85rem}.submission-new-post{padding-inline:14px}}
@media (max-width:390px){.submission{padding:16px 12px}.submission__role{min-height:46px}.submission__meta{align-items:flex-end}.submission__hint{max-width:66%}.submission textarea{min-height:120px;padding:10px}.submission-new-post{padding-inline:12px}}


/* 3D CƠM / PHỞ buttons inside Hello Em */
.submission__roles{gap:12px}

.submission__role{
  min-height:54px !important;
  border-width:1px !important;
  border-style:solid !important;
  border-radius:10px !important;
  background:#fff !important;
  transform:translateY(0);
  box-shadow:
    0 4px 0 rgba(0,0,0,.18),
    0 7px 13px rgba(0,0,0,.09),
    inset 0 1px 0 rgba(255,255,255,.95);
  transition:transform .12s ease,box-shadow .12s ease,background-color .12s ease,color .12s ease,border-color .12s ease;
}

.submission__role--com{
  color:var(--color-com) !important;
  border-color:var(--color-com) !important;
  background:linear-gradient(180deg,#fff 0%,#fff 72%,#fff7fa 100%) !important;
}

.submission__role--pho{
  color:var(--color-pho) !important;
  border-color:var(--color-pho) !important;
  background:linear-gradient(180deg,#fff 0%,#fff 72%,#fff7fb 100%) !important;
}

.submission__role-inner{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  pointer-events:none;
}

.submission__role-icon{
  display:block;
  width:18px;
  height:18px;
  flex:0 0 18px;
}

.submission__role:active{
  transform:translateY(3px);
  box-shadow:
    0 1px 0 rgba(0,0,0,.18),
    0 3px 6px rgba(0,0,0,.08),
    inset 0 1px 0 rgba(255,255,255,.9);
}

.submission__role:has(input:checked){
  color:#fff !important;
  transform:translateY(2px);
  box-shadow:
    0 2px 0 rgba(0,0,0,.22),
    0 4px 8px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.24);
}

.submission__role--com:has(input:checked){
  background:linear-gradient(180deg,#bd315e 0%,var(--color-com) 100%) !important;
  border-color:var(--color-com) !important;
}

.submission__role--pho:has(input:checked){
  background:linear-gradient(180deg,#ef6b9b 0%,var(--color-pho) 100%) !important;
  border-color:var(--color-pho) !important;
}

@media(max-width:390px){
  .submission__role{min-height:50px !important;border-radius:9px !important}
  .submission__role-icon{width:17px;height:17px;flex-basis:17px}
}