/* ============================================================
   DIC2 Webmail - lop giao dien 2 cot khoac len login.jsp goc
   Nhan dien: xanh #024FA1 / #0062A4, do #C40000, font Roboto
   Khong doi cau truc form -> giu nguyen co che login_csrf
   ============================================================ */
:root{
  --dic-blue:#024FA1; --dic-blue-2:#0062A4; --dic-blue-dark:#012F63;
  --dic-red:#C40000; --dic-ink:#1B2430; --dic-muted:#6B7684;
  --dic-line:#DDE3EA; --dic-bg:#F4F6F9;
  --dic-radius:14px;
  --dic-font:Roboto,"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
}

html.dic2, html.dic2 body{
  height:100%; margin:0; padding:0;
  background:var(--dic-bg); color:var(--dic-ink);
  font-family:var(--dic-font); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
html.dic2 .loginScreen{background:none;border:0;margin:0;padding:0;height:auto;}
html.dic2 .positioning{position:static;margin:0;padding:0;width:auto;height:auto;}

/* ---------- Khung 2 cot ---------- */
.dic2-shell{
  display:flex; min-height:100vh; align-items:stretch;
}

/* ---------- Cot trai: nhan dien ---------- */
.dic2-brand{
  flex:1 1 52%; position:relative; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center;
  padding:56px 6vw; color:#fff;
  background:
    radial-gradient(1100px 620px at 12% 12%, rgba(255,255,255,.16), transparent 62%),
    linear-gradient(140deg,var(--dic-blue-2) 0%,var(--dic-blue) 45%,var(--dic-blue-dark) 100%);
}
.dic2-brand::before{
  content:""; position:absolute; inset:0; opacity:.14; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.55) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.55) 1px,transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(circle at 30% 40%,#000 10%,transparent 72%);
  -webkit-mask-image:radial-gradient(circle at 30% 40%,#000 10%,transparent 72%);
}
.dic2-brand::after{
  content:""; position:absolute; right:-14%; bottom:-28%;
  width:72%; height:88%; transform:rotate(-18deg);
  background:linear-gradient(90deg,rgba(255,255,255,.10),rgba(255,255,255,0));
  border-radius:60px; pointer-events:none;
}
.dic2-brand-inner{position:relative;z-index:2;max-width:560px;}
.dic2-logo{
  width:104px;height:104px;border-radius:18px;background:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 14px 34px rgba(0,0,0,.24); margin-bottom:30px; padding:10px;
}
.dic2-logo img{max-width:100%;max-height:100%;display:block;}
.dic2-company{
  font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.78);margin:0 0 12px;font-weight:500;
}
.dic2-slogan{
  font-size:clamp(18px,3.4vw,18px);font-weight:700;line-height:1.18;margin:0 0 20px;
  text-shadow:0 2px 18px rgba(0,0,0,.22);
}
.dic2-slogan em{font-style:normal;color:#FFD24A;}
.dic2-rule{width:74px;height:5px;border-radius:3px;background:var(--dic-red);margin:0 0 22px;}
.dic2-sub{font-size:16px;color:rgba(255,255,255,.9);margin:0;max-width:44ch;}
.dic2-meta{
  position:relative;z-index:2;margin-top:44px;display:flex;gap:28px;flex-wrap:wrap;
  font-size:13px;color:rgba(255,255,255,.72);
}
.dic2-meta b{display:block;font-size:20px;color:#fff;font-weight:700;}

/* ---------- Cot phai: form ---------- */
.dic2-panel{
  flex:1 1 48%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; padding:48px 5vw; background:#fff;
}
.dic2-panel-inner{width:100%;max-width:420px;}
.dic2-welcome{margin:0 0 4px;font-size:26px;font-weight:700;color:var(--dic-ink);}
.dic2-welcome-sub{margin:0 0 30px;color:var(--dic-muted);font-size:15px;}

html.dic2 .contentBox{
  background:none;border:0;box-shadow:none;margin:0;padding:0;width:auto;
}
html.dic2 .decor1,html.dic2 .decor2{display:none !important;}
html.dic2 .contentBox table{width:100%;border-collapse:collapse;}
html.dic2 .contentBox td{padding:0;background:none;border:0;}

html.dic2 td.ZLoginField,html.dic2 .ZLoginField{
  display:block;width:100%;padding:0 0 6px !important;
  font-size:13px;font-weight:600;color:var(--dic-ink);text-align:left !important;white-space:normal;
}
html.dic2 input[type=text],
html.dic2 input[type=password],
html.dic2 input[type=email],
html.dic2 select{
  width:100%;box-sizing:border-box;
  height:46px;padding:0 14px;margin:0 0 16px;
  border:1.5px solid var(--dic-line);border-radius:10px;
  background:#fff;color:var(--dic-ink);font-size:15px;font-family:var(--dic-font);
  transition:border-color .15s,box-shadow .15s;
}
html.dic2 input[type=text]:focus,
html.dic2 input[type=password]:focus,
html.dic2 select:focus{
  outline:none;border-color:var(--dic-blue);
  box-shadow:0 0 0 4px rgba(2,79,161,.13);
}
html.dic2 input[type=checkbox]{width:17px;height:17px;accent-color:var(--dic-blue);vertical-align:-3px;margin-right:8px;}

html.dic2 .ZLoginButton,
html.dic2 input[type=submit],
html.dic2 .launchButton{
  display:block;width:100%;box-sizing:border-box;
  height:48px;margin:20px 0 0;padding:0 18px;
  background:linear-gradient(135deg,var(--dic-blue-2),var(--dic-blue));
  color:#fff !important;border:0;border-radius:10px;
  font-size:16px;font-weight:600;font-family:var(--dic-font);
  letter-spacing:.02em;cursor:pointer;
  box-shadow:0 8px 20px rgba(2,79,161,.28);
  transition:transform .12s,box-shadow .12s,filter .12s;
}
html.dic2 .ZLoginButton:hover,html.dic2 input[type=submit]:hover{
  filter:brightness(1.06);transform:translateY(-1px);
  box-shadow:0 12px 26px rgba(2,79,161,.34);
}
html.dic2 .ZLoginButton:active,html.dic2 input[type=submit]:active{transform:translateY(0);}
html.dic2 .submitTD{text-align:left;padding:0 !important;}

html.dic2 .ZLoginInfoMessage,html.dic2 #ZLoginErrorPanel{
  display:block;margin:0 0 18px;padding:12px 14px;
  background:#FFF4F4;border:1px solid #F3C9C9;border-left:4px solid var(--dic-red);
  border-radius:8px;color:#8A1414;font-size:14px;text-align:left;
}
html.dic2 #ZLoginForgotPassword a,html.dic2 #ZLoginWhatsThis,html.dic2 a{
  color:var(--dic-blue);text-decoration:none;
}
html.dic2 a:hover{text-decoration:underline;}

html.dic2 .legalNotice-small,html.dic2 .copyright{
  margin:26px 0 0;padding:0;font-size:12px;color:var(--dic-muted);
  text-align:left;line-height:1.6;background:none;border:0;
}
.dic2-support{
  margin-top:18px;padding-top:16px;border-top:1px solid var(--dic-line);
  font-size:12.5px;color:var(--dic-muted);
}
.dic2-support b{color:var(--dic-ink);}

.dic2-notice{
  margin-top:22px;padding:12px 14px;border-radius:10px;
  background:#FFF8E6;border:1px solid #F0DFB0;color:#6B5410;font-size:12.5px;line-height:1.55;
}
.dic2-notice b{color:#8A6A00;}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .dic2-shell{flex-direction:column;}
  .dic2-brand{flex:0 0 auto;padding:34px 24px 30px;}
  .dic2-brand::after{display:none;}
  .dic2-logo{width:74px;height:74px;border-radius:14px;margin-bottom:18px;}
  .dic2-slogan{font-size:18px;}
  .dic2-sub{font-size:14px;}
  .dic2-meta{margin-top:24px;gap:20px;}
  .dic2-meta b{font-size:17px;}
  .dic2-panel{padding:32px 22px 44px;}
}
@media (max-width:420px){
  .dic2-brand{padding:26px 18px 24px;}
  .dic2-panel{padding:26px 18px 36px;}
  .dic2-welcome{font-size:22px;}
}

/* ============ VA THUC TE THEO DOM Zimbra 8.8.15 cua mail.dic2.vn ============ */
html.dic2 .LoginScreen{background:none !important;border:0;margin:0;padding:0;height:auto;width:auto;}
html.dic2 .center{position:static;margin:0;padding:0;width:auto;height:auto;text-align:left;}
html.dic2 .Footer,html.dic2 body > .decor1,html.dic2 body > .decor2{display:none !important;}
html.dic2 .contentBox h1,html.dic2 #bannerLink,html.dic2 .ImgLoginBanner,html.dic2 #ZLoginAppName{display:none !important;}
html.dic2 #ZLoginWhatsThis,html.dic2 #ZLoginUnsupported{display:none !important;}
html.dic2 .contentBox hr{display:none;}

/* bang form -> xep doc */
html.dic2 .contentBox table.form,
html.dic2 .contentBox table.form tbody,
html.dic2 .contentBox table.form tr,
html.dic2 .contentBox table.form td{display:block;width:100%;box-sizing:border-box;}
html.dic2 .contentBox table.form td{padding:0;}
html.dic2 .contentBox table.form td label{
  display:block;margin:0 0 6px;font-size:13px;font-weight:600;color:var(--dic-ink);
}
html.dic2 input.zLoginField{width:100%;box-sizing:border-box;}
html.dic2 td.submitTD{display:block;padding:0 !important;}
html.dic2 td.submitTD label{display:inline !important;font-weight:400;font-size:14px;margin:0;color:var(--dic-muted);}
html.dic2 .contentBox .positioning{position:static;display:block;}
html.dic2 select#client{height:42px;margin-top:4px;}
html.dic2 #ZLoginWhatsThisAnchor{font-size:12.5px;}

/* logo cot trai - dung logo goc cua website dic2.vn */
.dic2-logo{width:118px;height:118px;padding:12px;}

/* khung phu kin viewport - tranh bi .center bo hep */
html.dic2,html.dic2 body{overflow:hidden;}
.dic2-shell{position:fixed;top:0;left:0;right:0;bottom:0;width:100%;overflow-y:auto;}
@media (max-width:980px){ html.dic2,html.dic2 body{overflow:auto;} }