/* ==========================================================
   HUTECH CTV BRAND SYSTEM V12
   Brand: HUTECH / CTV Tuyển sinh
   Palette: #0072BC / #FFC20E / #ED1C24 / #123B64 / #FFFFFF / #F5F7FA
========================================================== */
:root{
  --hutech-blue:#0072BC;
  --hutech-blue-dark:#005A96;
  --hutech-navy:#123B64;
  --hutech-yellow:#FFC20E;
  --hutech-red:#ED1C24;
  --hutech-white:#FFFFFF;
  --hutech-bg:#F5F7FA;
  --hutech-line:#DCE6EE;
}
html,body,input,select,textarea,button{font-family:"Be Vietnam Pro","Inter","Segoe UI",Tahoma,Arial,sans-serif!important}
body{background:linear-gradient(180deg,#f7fbfe 0,#f5f7fa 36%,#f5f7fa 100%)}
.identity-bar,.topbar{background:linear-gradient(90deg,var(--hutech-blue) 0 72%,var(--hutech-yellow) 72% 90%,var(--hutech-red) 90% 100%)!important}

/* public form */
.form-shell{border-color:#dce8f0!important;box-shadow:0 24px 70px rgba(18,59,100,.11)!important}
.form-header{position:relative;background:linear-gradient(145deg,#ffffff 0,#f7fbfe 65%,#eef8fe 100%)!important}
.form-header:after{content:"";position:absolute;right:-75px;top:-95px;width:280px;height:280px;border-radius:50%;border:42px solid rgba(0,114,188,.055);pointer-events:none}
.hutech-logo{position:relative;z-index:1}
.brand-sublockup{position:relative;z-index:1;display:flex;align-items:center;gap:12px;margin:0 0 18px;padding:10px 12px;border:1px solid #d8eaf5;background:rgba(255,255,255,.86);border-radius:14px;width:max-content;max-width:100%}
.brand-sublockup img{width:46px;height:46px;border-radius:12px;display:block;box-shadow:0 6px 16px rgba(0,90,150,.13)}
.brand-sublockup b{display:block;color:var(--hutech-navy);font-size:13px;letter-spacing:.25px}
.brand-sublockup span{display:block;color:#607388;font-size:11px;margin-top:2px;line-height:1.4}
.brand-tagline{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0}
.brand-tagline span{font-size:11px;font-weight:800;color:var(--hutech-blue-dark);background:#eef8fe;border:1px solid #d5ebf7;border-radius:999px;padding:6px 10px}
.form-header h1{color:var(--hutech-navy)!important}
.eyebrow{color:var(--hutech-blue)!important}
.group-title>span,.submit,.success-card button{background:var(--hutech-blue)!important}
.group-title>span:after{background:var(--hutech-yellow)!important}
.value-icon{background:#eef8fe!important;color:var(--hutech-blue)!important;border-color:#d5ebf7!important}
.value-grid article{box-shadow:0 8px 22px rgba(18,59,100,.055);transition:transform .18s,box-shadow .18s}
.value-grid article:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(18,59,100,.09)}
.submit{letter-spacing:.2px;box-shadow:0 10px 28px rgba(0,114,188,.22)!important}
.submit:after{background:linear-gradient(90deg,var(--hutech-yellow) 0 82%,var(--hutech-red) 82%)!important}
.brand-footer{margin:26px 0 0;padding:20px 18px;border-radius:14px;background:var(--hutech-navy);color:#fff;text-align:center;position:relative;overflow:hidden}
.brand-footer:before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:linear-gradient(90deg,var(--hutech-blue) 0 72%,var(--hutech-yellow) 72% 90%,var(--hutech-red) 90%)}
.brand-footer b{display:block;font-size:13px;letter-spacing:.2px}.brand-footer span{display:block;font-size:11px;color:#d9e8f3;margin-top:6px}
.success-card{border-top:0!important;overflow:hidden;position:relative}.success-card:before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:linear-gradient(90deg,var(--hutech-blue) 0 72%,var(--hutech-yellow) 72% 90%,var(--hutech-red) 90%)}
.success-app-icon{width:72px;height:72px;border-radius:17px;display:block;margin:0 auto 12px;box-shadow:0 8px 20px rgba(0,90,150,.14)}

/* admin desktop */
.gate{background:radial-gradient(circle at 80% 20%,rgba(255,194,14,.12),transparent 28%),linear-gradient(145deg,#123B64,#005A96)!important}
.gate-card{border-top:0!important;position:relative;overflow:hidden}.gate-card:before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:linear-gradient(90deg,var(--hutech-blue) 0 72%,var(--hutech-yellow) 72% 90%,var(--hutech-red) 90%)}
.admin-brand-mark{display:flex;align-items:center;gap:12px;margin-bottom:14px}.admin-brand-mark>img{width:64px;height:64px;border-radius:16px;box-shadow:0 8px 22px rgba(18,59,100,.15)}.admin-brand-mark .gate-logo{margin:0!important;width:220px!important;max-width:calc(100% - 80px)!important}
.side-brand{gap:10px!important}.side-brand>img{width:52px!important;height:52px!important;object-fit:cover;border-radius:13px;background:#fff;padding:0!important}.side-brand b{letter-spacing:.4px}.side-brand span{color:#d8eaf6!important}
.app main>header{border-bottom:1px solid #dce6ee;padding-bottom:14px}
.app main>header small{color:var(--hutech-blue)!important;font-weight:850;letter-spacing:.6px}
.metric{border-top:3px solid var(--hutech-blue)!important}.metric:nth-child(2){border-top-color:var(--hutech-yellow)!important}.metric:nth-child(5){border-top-color:#20a05a!important}
.primary,.save{background:var(--hutech-blue)!important}.send{background:var(--hutech-yellow)!important;color:var(--hutech-navy)!important}

@media(max-width:700px){
  .brand-sublockup{width:100%}.brand-sublockup img{width:44px;height:44px}.brand-tagline{gap:6px}.brand-tagline span{font-size:10px;padding:5px 8px}
  .form-header:after{right:-150px;top:-130px}
}