*{box-sizing:border-box}
html,body{margin:0;
  padding:0}
:root{--wcr-primary:#0f6670;
  --wcr-primary-dark:#0a4f58;
  --wcr-primary-soft:#eaf5f6;
  --wcr-primary-faint:#f5fafb;
  --wcr-ink:#24363a;
  --wcr-muted:#6e7f83;
  --wcr-line:#d8e4e6;
  --wcr-line-strong:#bdd2d5;
  --wcr-bg:#f3f7f8;
  --wcr-success:#1d7a59;
  --wcr-warning:#9a6419;
  --wcr-danger:#b6424b}

.wcr-dashboard-page{min-height:100vh;
  background:var(--wcr-bg);
  color:var(--wcr-ink);
  font-family:Inter,"Segoe UI",Roboto,Arial,sans-serif;
  font-weight:400;
  -webkit-font-smoothing:antialiased}
.wcr-dashboard-page a{color:inherit}

.wcr-appbar{height:62px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:0 18px;
  background:#fff;
  border-bottom:1px solid var(--wcr-line);
  position:sticky;
  top:0;
  z-index:50;
  box-shadow:none}
.wcr-appbrand{display:flex;
  align-items:center;
  gap:11px;
  min-width:0;
  color:var(--wcr-ink);
  text-decoration:none}
.wcr-app-logo,.wcr-appmark{width:40px;
  height:40px;
  flex:0 0 40px;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--wcr-line)}
.wcr-app-logo img{display:block;
  max-width:90%;
  max-height:90%;
  width:auto;
  height:auto;
  object-fit:contain}
.wcr-app-logo.wcr-site-icon img{width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  object-fit:cover}
.wcr-appmark{background:var(--wcr-primary);
  border-color:var(--wcr-primary);
  color:#fff;
  font-size:14.5px;
  font-weight:700;
  letter-spacing:.05em}
.wcr-appbrand span:last-child{display:flex;
  flex-direction:column;
  min-width:0;
  line-height:1.15}
.wcr-appbrand strong{font-size:16px;
  font-weight:650;
  letter-spacing:-.01em;
  color:#24454a}
.wcr-appbrand small{margin-top:4px;
  color:#7b8e92;
  font-size:12px;
  font-weight:450;
  letter-spacing:.035em}
.wcr-userbar{display:flex;
  align-items:center;
  gap:12px;
  font-size:14px}
.wcr-userbar span{color:#5e7377;
  font-weight:450}
.wcr-userbar a{color:var(--wcr-primary);
  text-decoration:none;
  font-weight:500}
.wcr-top-login{padding:6px 10px;
  border:1px solid var(--wcr-line-strong);
  border-radius:4px;
  background:#fff}

.wcr-dashboard-main{width:100%;
  padding:22px clamp(16px,2vw,40px) 32px}
.wcr-dashboard-wrap{width:100%;
  max-width:none;
  margin:0 auto}
.wcr-head{display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  margin:3px 0 13px}
.wcr-head h1{margin:0 0 4px!important;
  color:#173f45!important;
  font-size:17.5px!important;
  line-height:1.2;
  font-weight:720!important;
  letter-spacing:.07em;
  text-transform:uppercase}
.wcr-head p{margin:0!important;
  color:#718589!important;
  font-size:14px;
  line-height:1.5;
  font-weight:400}
.wcr-head p strong{color:#36555a;
  font-weight:600}
.wcr-head-actions{display:flex;
  gap:6px;
  flex-wrap:wrap;
  justify-content:flex-end}

.button{appearance:none;
  min-height:30px;
  padding:5px 9px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  border:1px solid var(--wcr-line-strong);
  border-radius:4px;
  background:#fff!important;
  color:#50696d!important;
  box-shadow:none!important;
  text-decoration:none!important;
  font:400 14px/1.15 Inter,"Segoe UI",Roboto,Arial,sans-serif;
  cursor:pointer;
  transition:.14s}
.button:hover,.button:focus{border-color:var(--wcr-primary)!important;
  background:var(--wcr-primary-faint)!important;
  color:var(--wcr-primary)!important;
  box-shadow:none!important}
.button-primary{background:var(--wcr-primary)!important;
  border-color:var(--wcr-primary)!important;
  color:#fff!important;
  font-weight:500}
.button-primary:hover,.button-primary:focus{background:var(--wcr-primary-dark)!important;
  border-color:var(--wcr-primary-dark)!important;
  color:#fff!important}
.button.disabled{opacity:.5;
  cursor:not-allowed;
  pointer-events:none}
.button-hero{min-height:32px!important;
  padding:6px 10px!important;
  font-size:13.75px!important}

.wcr-card{margin-bottom:14px;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--wcr-line);
  border-radius:5px;
  box-shadow:none;
  padding:0}
.wcr-table-scroll{width:100%;
  overflow:auto}
.wcr-table{width:100%;
  border-collapse:collapse;
  background:#fff;
  font-size:14.5px}
.wcr-table th{padding:9px 10px;
  background:#f6fafb;
  border-bottom:1px solid var(--wcr-line);
  color:#627a7e;
  text-align:left;
  white-space:nowrap;
  text-transform:uppercase;
  letter-spacing:.055em;
  font-size:12px;
  font-weight:650}
.wcr-table td{padding:10px;
  border-bottom:1px solid #e7eef0;
  color:#40585c;
  vertical-align:middle;
  font-weight:400}
.wcr-table tr:last-child td{border-bottom:0}
.wcr-table tbody tr:hover{background:#fbfdfd}
.wcr-table td strong{color:#24474c;
  font-weight:600}
.wcr-table code{padding:2px 5px;
  background:#f1f6f7;
  border:1px solid #e0eaec;
  border-radius:3px;
  color:#477076;
  font-size:13px}
.wcr-status,.wcr-badge{display:inline-flex!important;
  align-items:center;
  padding:3px 7px!important;
  border-radius:3px!important;
  font-size:12.5px!important;
  font-weight:540!important;
  white-space:nowrap}
.wcr-approved{background:#edf8f3;
  color:#17694d;
  border:1px solid #c8e3d7}
.wcr-pending{background:#fff8ec;
  color:#8a5b18;
  border:1px solid #eeddbf}
.wcr-badge{background:#edf7f8!important;
  color:#0b5b65!important;
  border:1px solid #c8e0e3}
.wcr-actions{white-space:nowrap}
.wcr-actions .button{min-height:27px;
  margin:1px 1px 1px 0;
  padding:4px 7px;
  border-radius:3px;
  font-size:13px;
  font-weight:400}
.wcr-muted{color:#87999c!important;
  font-style:normal!important;
  font-size:13px}
.wcr-empty{padding:36px 12px!important;
  color:#84969a!important;
  font-size:14px;
  text-align:center}
.wcr-pagination{display:flex;
  gap:4px;
  justify-content:flex-end;
  padding:12px}
.wcr-pagination a,.wcr-pagination span{min-width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border:1px solid var(--wcr-line);
  border-radius:3px;
  text-decoration:none;
  font-size:13px}
.wcr-pagination .current{background:var(--wcr-primary);
  border-color:var(--wcr-primary);
  color:#fff}

.wcr-notice{width:100%;
  margin:0 0 11px;
  padding:9px 11px;
  border-radius:4px;
  font-size:14px;
  font-weight:500}
.wcr-notice-success{background:#f0f9f5;
  color:#17694d;
  border:1px solid #bddfcf}
.wcr-notice-warning{background:#fff8ed;
  color:#8f5f1b;
  border:1px solid #eed8b4}
.wcr-notice-error{background:#fff4f5;
  color:#9a3440;
  border:1px solid #ebc7cc}

/* Đăng nhập / không có quyền */
.wcr-login-state{width:min(590px,calc(100% - 24px));
  margin:7vh auto 0;
  padding:34px 34px 32px;
  background:#fff;
  border:1px solid var(--wcr-line);
  border-top:4px solid var(--wcr-primary);
  border-radius:5px;
  text-align:center;
  box-shadow:none}
.wcr-login-icon{width:48px;
  height:48px;
  margin:0 auto 14px;
  display:grid;
  place-items:center;
  background:var(--wcr-primary-soft);
  color:var(--wcr-primary);
  font-size:22.5px;
  font-weight:650}
.wcr-login-kicker{margin-bottom:7px;
  color:#6b888d;
  font-size:12px;
  font-weight:700;
  letter-spacing:.14em}
.wcr-login-state h1,.wcr-login-state h2{margin:0 0 8px;
  color:#173f45;
  font-size:21.5px;
  font-weight:680}
.wcr-login-state p{max-width:450px;
  margin:0 auto 20px;
  color:#708387;
  font-size:15px;
  line-height:1.65}
.wcr-login-button{min-height:35px!important;
  padding:7px 14px!important;
  border-radius:4px!important;
  font-size:14px!important}
.wcr-login-inline{margin:38px auto}
.wcr-empty-state{max-width:700px;
  margin:7vh auto;
  padding:32px;
  background:#fff;
  border:1px solid var(--wcr-line);
  border-top:4px solid var(--wcr-primary);
  border-radius:5px;
  box-shadow:none}
.wcr-empty-state h1{margin-top:0;
  font-size:20.5px}

/* Trình tạo biểu mẫu: phẳng, cùng ngôn ngữ với form công khai */
.wcr-builder-page{max-width:none!important}
.wcr-builder-page .wcr-head{max-width:none;
  margin-left:auto;
  margin-right:auto}
.wcr-builder-shell{max-width:none!important;
  margin:0 auto 72px!important;
  padding:0!important;
  background:transparent!important;
  border-radius:0!important}
.wcr-form-title-card{position:relative;
  margin-bottom:12px!important;
  padding:24px 26px 22px!important;
  overflow:hidden;
  background:#fff!important;
  border:1px solid var(--wcr-line)!important;
  border-top:4px solid var(--wcr-primary)!important;
  border-radius:5px!important;
  box-shadow:none!important}
.wcr-title-accent{display:none!important}
.wcr-builder-label{display:block;
  margin-bottom:7px;
  color:#6b8185!important;
  font-size:12px!important;
  font-weight:700!important;
  letter-spacing:.11em!important;
  text-transform:uppercase}
.wcr-title-input{display:block;
  width:100%;
  padding:5px 0 9px!important;
  border:0!important;
  border-bottom:1px solid #bfcfd2!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#173f45!important;
  font-size:24.5px!important;
  line-height:1.25!important;
  font-weight:600!important}
.wcr-title-input:focus{border-bottom:2px solid var(--wcr-primary)!important;
  outline:none!important}
.wcr-title-settings{display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:18px 24px!important;
  margin-top:22px!important}
.wcr-title-settings label{display:block;
  margin:0 0 6px!important;
  color:#36555a!important;
  font-size:14px!important;
  font-weight:560!important}
.wcr-title-settings small{display:block;
  margin-top:5px!important;
  color:#84969a!important;
  font-size:12px!important;
  line-height:1.45}
.wcr-title-settings>div>input,.wcr-title-settings input[type=datetime-local]{width:100%!important;
  min-height:39px!important;
  padding:7px 9px!important;
  border:1px solid #cfdde0!important;
  border-radius:4px!important;
  background:#fff!important;
  box-shadow:none!important;
  color:#2b484d!important;
  font-family:inherit;
  font-weight:400;
  font-size:14.5px!important;
  line-height:1.3}
.wcr-title-settings input:focus{border-color:var(--wcr-primary)!important;
  box-shadow:0 0 0 2px rgba(15,102,112,.07)!important;
  outline:none!important}
.wcr-slug-row{display:flex!important;
  align-items:center!important;
  overflow:hidden!important;
  background:#fff!important;
  border:1px solid #cfdde0!important;
  border-radius:4px!important}
.wcr-slug-row span{padding:0 9px!important;
  color:#75898d!important;
  font-size:13px!important;
  white-space:nowrap}
.wcr-slug-row input{flex:1!important;
  min-width:150px!important;
  min-height:37px!important;
  padding:7px 8px!important;
  border:0!important;
  border-left:1px solid #e0e9eb!important;
  border-radius:0!important;
  box-shadow:none!important;
  background:#fff!important;
  color:#2f5156!important}
.wcr-builder-toolbar{display:flex!important;
  align-items:flex-end!important;
  justify-content:space-between!important;
  gap:14px!important;
  margin:12px 0 9px!important;
  padding:0!important}
.wcr-builder-toolbar>div{display:flex!important;
  flex-direction:column!important;
  gap:2px!important}
.wcr-builder-toolbar strong{color:#24474c!important;
  font-size:15.5px!important;
  font-weight:620!important}
.wcr-builder-toolbar span{color:#7d9094!important;
  font-size:13px!important;
  line-height:1.45}
.wcr-question-list{display:flex!important;
  flex-direction:column!important;
  gap:8px!important}
.wcr-question-card{position:relative;
  padding:10px 18px 0!important;
  background:#fff!important;
  border:1px solid var(--wcr-line)!important;
  border-radius:4px!important;
  box-shadow:none!important;
  transition:border-color .14s!important}
.wcr-question-card:hover{border-color:#c5d8db!important;
  box-shadow:none!important}
.wcr-question-card:focus-within{padding-left:18px!important;
  border:1px solid #aacbd0!important;
  border-left:3px solid var(--wcr-primary)!important;
  box-shadow:none!important}
.wcr-card-new{animation:wcr-pop .25s ease}
.wcr-dragging{opacity:.58;
  transform:none!important;
  box-shadow:none!important}
@keyframes wcr-pop{0%{opacity:.35}
100%{opacity:1}
}
.wcr-drag-handle{width:42px;
  height:13px;
  margin:0 auto 3px!important;
  display:grid!important;
  grid-template-columns:repeat(3,3px)!important;
  grid-auto-rows:3px!important;
  gap:3px!important;
  justify-content:center!important;
  align-content:center!important;
  cursor:grab}
.wcr-drag-handle span{width:3px!important;
  height:3px!important;
  border-radius:50%!important;
  background:#b8c7ca!important;
  box-shadow:0 6px 0 #b8c7ca!important}
.wcr-question-top{display:grid!important;
  grid-template-columns:minmax(0,1fr) 235px!important;
  gap:14px!important;
  align-items:start!important}
.wcr-question-title{width:100%!important;
  min-height:40px!important;
  padding:9px 9px!important;
  border:1px solid transparent!important;
  border-bottom:1px solid #cbdadd!important;
  border-radius:0!important;
  background:#fbfdfd!important;
  box-shadow:none!important;
  color:#294a4f!important;
  font-size:15.5px!important;
  font-weight:500!important}
.wcr-question-title:focus{background:#fff!important;
  border-bottom-color:var(--wcr-primary)!important;
  outline:none!important}
.wcr-question-type{width:100%!important;
  min-height:40px!important;
  padding:7px 9px!important;
  border:1px solid #cfdde0!important;
  border-radius:4px!important;
  background:#fff!important;
  box-shadow:none!important;
  color:#456166!important;
  font-size:14px!important}
.wcr-question-body{padding:14px 0 16px!important}
.wcr-placeholder-setting input{width:min(700px,100%)!important;
  padding:7px 1px!important;
  border:0!important;
  border-bottom:1px solid #d2dfe1!important;
  border-radius:0!important;
  background:#fff!important;
  box-shadow:none!important;
  color:#536b6f!important;
  font-size:14px!important}
.wcr-placeholder-setting input:focus{border-bottom:1px solid var(--wcr-primary)!important;
  outline:none!important}
.wcr-answer-preview{width:min(700px,100%)!important;
  height:31px!important;
  padding:5px 1px!important;
  border-bottom:1px dotted #aebfc2!important;
  color:#95a4a7!important;
  font-size:13px!important}
.wcr-choice-editor[hidden],.wcr-placeholder-setting[hidden],.wcr-answer-preview[hidden]{display:none!important}
.wcr-options-hidden{display:none!important}
.wcr-option-list{display:flex!important;
  flex-direction:column!important;
  gap:7px!important;
  max-width:760px!important}
.wcr-option-row{display:grid!important;
  grid-template-columns:18px minmax(0,1fr) 28px!important;
  align-items:center!important;
  gap:7px!important}
.wcr-option-marker{width:14px!important;
  height:14px!important;
  border:1.5px solid #9db1b5!important;
  border-radius:50%!important}
.wcr-question-card[data-type=checkbox] .wcr-option-marker{border-radius:2px!important}
.wcr-question-card[data-type=select] .wcr-option-marker{border:0!important;
  width:16px!important;
  height:16px!important;
  color:#71868a!important}
.wcr-option-input{width:100%!important;
  padding:6px 2px!important;
  border:0!important;
  border-bottom:1px solid transparent!important;
  border-radius:0!important;
  background:#fff!important;
  box-shadow:none!important;
  color:#506a6e!important;
  font-size:14px!important}
.wcr-option-input:focus{border-bottom-color:var(--wcr-primary)!important;
  outline:none!important}
.wcr-option-remove,.wcr-add-option,.wcr-icon-btn{border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#6c8185!important;
  cursor:pointer!important}
.wcr-option-remove{width:28px!important;
  height:28px!important;
  border-radius:3px!important;
  font-size:21.5px!important;
  line-height:1!important}
.wcr-option-remove:hover,.wcr-icon-btn:hover{background:#eff6f7!important;
  color:var(--wcr-primary)!important}
.wcr-add-option{margin:6px 0 0 23px!important;
  padding:5px 2px!important;
  color:var(--wcr-primary)!important;
  font-size:13px!important;
  font-weight:550!important}
.wcr-question-footer{min-height:48px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  border-top:1px solid #e5edef!important}
.wcr-card-move,.wcr-question-actions{display:flex!important;
  align-items:center!important;
  gap:2px!important}
.wcr-icon-btn{width:31px!important;
  height:31px!important;
  border-radius:3px!important;
  font-size:17.5px!important;
  line-height:31px!important}
.wcr-footer-separator{width:1px!important;
  height:24px!important;
  margin:0 7px!important;
  background:#d7e2e4!important}
.wcr-required-switch{display:flex!important;
  align-items:center!important;
  gap:8px!important;
  margin:0!important;
  color:#557074!important;
  font-size:13px!important;
  font-weight:450!important;
  cursor:pointer!important}
.wcr-required-switch input{position:absolute!important;
  opacity:0!important;
  pointer-events:none!important}
.wcr-required-switch i{width:30px!important;
  height:14px!important;
  border-radius:999px!important;
  background:#c2d0d2!important;
  position:relative!important;
  transition:.18s!important}
.wcr-required-switch i:after{content:"";
  position:absolute!important;
  width:18px!important;
  height:18px!important;
  left:-1px!important;
  top:-2px!important;
  border-radius:50%!important;
  background:#fff!important;
  border:1px solid #afc0c3!important;
  box-shadow:none!important;
  transition:.18s!important}
.wcr-required-switch input:checked+i{background:#9bc8cd!important}
.wcr-required-switch input:checked+i:after{left:13px!important;
  background:var(--wcr-primary)!important;
  border-color:var(--wcr-primary)!important}
.wcr-add-bottom{display:block!important;
  width:100%!important;
  margin:8px 0 0!important;
  padding:10px!important;
  border:1px dashed #a8c7cb!important;
  border-radius:4px!important;
  background:#f8fbfc!important;
  color:var(--wcr-primary)!important;
  font-size:14px!important;
  font-weight:550!important;
  cursor:pointer!important}
.wcr-add-bottom:hover{background:#eef7f8!important}
.wcr-savebar{position:sticky!important;
  bottom:8px!important;
  z-index:20!important;
  max-width:none!important;
  margin:0 auto!important;
  padding:9px 10px!important;
  display:flex!important;
  align-items:center!important;
  gap:7px!important;
  flex-wrap:wrap!important;
  background:rgba(255,255,255,.97)!important;
  border:1px solid var(--wcr-line)!important;
  border-radius:4px!important;
  box-shadow:none!important;
  backdrop-filter:blur(7px)}

@media(max-width:980px){.wcr-dashboard-main{padding:14px 9px 22px}
.wcr-appbar{padding:0 12px}
.wcr-head{align-items:flex-start;
  flex-direction:column}
.wcr-head-actions{justify-content:flex-start}
.wcr-actions{min-width:180px;
  white-space:normal}
.wcr-table th,.wcr-table td{padding:8px}
.wcr-userbar span{display:none}
.wcr-builder-page .wcr-head{max-width:none}
.wcr-builder-shell{max-width:none!important}
.wcr-title-settings{grid-template-columns:1fr!important}
.wcr-question-top{grid-template-columns:1fr!important}
}

@media(max-width:620px){.wcr-appbar{height:57px}
.wcr-appbrand small{display:none}
.wcr-app-logo,.wcr-appmark{width:36px;
  height:36px;
  flex-basis:36px}
.wcr-dashboard-main{padding:14px 12px 24px}
.wcr-head h1{font-size:15.5px!important}
.wcr-head p{font-size:13.3px}
.wcr-card{border-radius:4px}
.wcr-actions .button{font-size:12.5px;
  padding:4px 6px}
.wcr-login-state{padding:28px 18px}
.wcr-form-title-card{padding:20px 15px 18px!important}
.wcr-title-input{font-size:21.5px!important}
.wcr-slug-row{align-items:stretch!important;
  flex-direction:column!important;
  padding:7px!important}
.wcr-slug-row span{padding:1px 0 6px!important}
.wcr-slug-row input{width:100%!important;
  border-left:0!important;
  border-top:1px solid #e0e9eb!important}
.wcr-builder-toolbar{align-items:flex-start!important;
  flex-direction:column!important}
.wcr-question-card{padding:9px 11px 0!important}
.wcr-question-card:focus-within{padding-left:9px!important}
.wcr-question-footer{align-items:flex-end!important}
.wcr-question-actions{margin-left:auto!important}
.wcr-savebar{bottom:4px!important;
  border-radius:4px!important}
.wcr-savebar .button{flex:0 0 auto}
}


.wcr-copy-form{white-space:nowrap!important}

.button.wcr-danger-action{
  border-color:#e3bcc0!important;
  color:var(--wcr-danger)!important;
  background:#fff!important}
.button.wcr-danger-action:hover,.button.wcr-danger-action:focus{
  border-color:var(--wcr-danger)!important;
  color:#fff!important;
  background:var(--wcr-danger)!important}
.wcr-row-actions{white-space:nowrap}